Discussion :

[val69670]

Bonjour à tous,

Je suis en train d'essayer de faire un petit système pour afficher une image à côté du <input file> en live. Celui-ci fonctionne bien et l'image s'affiche bien.
Toutefois, si une image fait 900*800 par exemple, cela est trop grand pour mon site et je voudrais donc limiter l'affichage à 31*31.

Y a t-il une solution pour forcer l'image à s'afficher redimensionné ?

Merci par avance.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<input id="fileUpload" multiple="multiple" type="file"/> 
 
<div id="image-holder"></div>

Début du code concerné :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$(document).ready(function() {
        $("#fileUpload").on('change', function() {
          //Get count of selected files
          var countFiles = $(this)[0].files.length;
          var imgPath = $(this)[0].value;
          var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
          var image_holder = $("#image-holder");
          image_holder.empty();

[SpaceFrog]

et juste avec une class css ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="image-holder"></div>

et le css

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#image-holder img {
width: 300px;
height: auto;
}