Im using this javascript code to show selected image to upload:

    var input = document.getElementById("images"), 
    formdata = false;

function showUploadedItem (source) {
    var list = document.getElementById("image-list"),
        li   = document.createElement("li"),
        img  = document.createElement("img");
    img.src = source;
    li.appendChild(img);
    list.appendChild(li);
}  

HTML:

 <span class="span4">
   <div id="response"></div>
   <ul id="image-list">
   </ul>
 </span> 

How can I edit the code so the image selected and is showed is showed with 400px insted of orginal size. Example:

Thanks!

Im using this javascript code to show selected image to upload:

    var input = document.getElementById("images"), 
    formdata = false;

function showUploadedItem (source) {
    var list = document.getElementById("image-list"),
        li   = document.createElement("li"),
        img  = document.createElement("img");
    img.src = source;
    li.appendChild(img);
    list.appendChild(li);
}  

HTML:

 <span class="span4">
   <div id="response"></div>
   <ul id="image-list">
   </ul>
 </span> 

How can I edit the code so the image selected and is showed is showed with 400px insted of orginal size. Example:

Thanks!

• javascript
• jquery
• html
• image

• Can you expand on the meaning of (resize) in Q title? – Roko C. Buljan Commented Apr 24, 2016 at 19:36

6 Answers 6

You can say:

img.style.width = "400px";
img.style.height = "400px";

CSS:

#image-list img{
   height: 400px;
   width: auto;
}

if you really want to physically resize your image... than if your image is on your server you could send it to canvas, perform a resize and serve it as base64 encoded string...

Interesting reading: How to Preview Image, get file size, image height and width before upload?

You can use style to set width and height in %:

img.style.width="100%";

You could also add a css class (resize) to this images

img.resize{
    width:540px; /* you can use % */
    height: auto;
}

By including the lines...

img.style.width='400px';

img.style.height='400px';

Or whatever size you wanted.

After the creation of your object img, you can use something like:

img.width = "400";
img.height = "400";