上传img（点击 <image> ，不 <input type=file> ），在下面显示 <img> ，客户端调整大小

Question

Goal:

Upload image by clicking on <img> instead of <input type="file"> (there will be 3 uploads, so its just 3 placeholders on page load, then once you click any placeholder, you choose a file, and this file gets to display in respective placeholder). What I have now:

HTML:

<div class="image-upload">
   <label for="file_input1">
       <img id="send_photo_img1" src="assets/images/index2.png"/>
   </label>
   <input id="file_input1" type="file"/>
</div>  

CSS:

.image-upload > input
{
    display: none;
}

.image-upload img
{
    display: inline-block;
    margin-right:6px;
    width: 90px;
    height: 90px;
    cursor: pointer;
}

Jquery:

function readURL(input) {

if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
        $('#send_photo_img1')
            .attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
}
}    

$("#send_photo_img1").change(function(){
    readURL("#file_input1");
});

While scripts like plupload.js or dropzone.js do that, but they also got lots of stuff I don't really need (ie UI that is not quite fitting my need or lots of code options not really needed, but taking space), so trying to implement this in scope required for my current needs.

The current code only lets me choose the desired img, but not display it. Currently, once the image is chosen, the loading sign is displayed for some time, but nothing happens afterward. No error output in Chrome F12 also.

Answer 1

Figured it out and turned out to be quite straightforward:

HTML

<div class="img_upload">
    <img class="send_photo_img" id="send_photo1_img" src="assets/images/index2.png"/>
    <input id="send_photo1" name="send_photo1" class="send_photo_input" type="file"/>
</div>
<div class="img_upload">
    <img class="send_photo_img" id="send_photo2_img" src="assets/images/index2.png"/>
    <input name="send_photo2" class="send_photo_input" type="file"/>
</div>  

Have as many img as you like.

Further on, with CSS you hide <input> and thereon trigger the click on <input> via JS, once it catches the click on <image> :

CSS

.img_upload input
{
    display: none;
}

JS (to trigger the click)

$(".img_upload img").click(function(){
        img = $(this);
        input = img.next(".send_photo_input");
        var newUrl;

        input.trigger("click");
        input.change(function(){
            newUrl = resize_and_draw(this, img.width());
            url.push(newUrl);
    });
});

and finally, you do the rest with HTML5 canvas (nowadays it's supported by almost anything except for Opera Mini (global share of users ~2,81% as of early Oct 2017)).

You may be also interested to resize the image at the client (to maintain bandwidth, decrease load speed etc), so below is the complete code:

function resize_and_draw (input, targetH) {

if (input.files && input.files[0] && /\.(jpe?g|png|gif)$/i.test(input.files[0].name)) {

    var reader = new FileReader();
    reader.onload = function (e) {

        var img = new Image();
        img.src = reader.result;
        img.onload = function() {

          canvas = document.createElement( 'canvas');
            canvas.width = img.naturalWidth;   
            canvas.height = img.naturalHeight;
            context = canvas.getContext('2d');
            context.drawImage( img, 0, 0, img.naturalWidth, img.naturalHeight );

                targetHeight = targetH;
            targetWidth = img.naturalWidth * targetHeight / img.naturalHeight;

            //resize
            resample_hermite(canvas, img.naturalWidth, img.naturalHeight, targetWidth*2, targetHeight*2);
            url = canvas.toDataURL("image/png");
            $(input).prev(".send_photo_img").attr('src', url);

        }     
    }

    reader.readAsDataURL(input.files[0]);

    return url;
}
}

Hope this will help your goals. Cheers!