上传img(通过单击< image&gt ;，而不是< input type = file>)，并在以下< img>中进行显示，客户端调整大小 [英] upload img (by clicking on <image>, not <input type=file>), display it in following <img>,client-side resize

问题描述

目标:

通过单击<img>而不是<input type="file">来上传图像(将上传3次，因此页面加载时仅占3个占位符，然后单击任何占位符后，选择一个文件，该文件将显示在相应的占位符中).我现在所拥有的:

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");
});

虽然像plupload.js或dropzone.js这样的脚本可以做到这一点，但是它们还有很多我确实不需要的东西(即，UI不太适合我的需要，或者很多不需要的代码选项，但是空间)，因此尝试在满足当前需求的范围内实现此功能.

While scripts like plupload.js or dropzone.js do that, but they also got lots of stuff I don't really need (i.e. 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.

当前代码只能让我选择所需的img，而不能显示它.当前，一旦选择了图像，就会显示加载标志一段时间，但是此后什么也没有发生.在Chrome F12中也没有错误输出.

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.

推荐答案

弄清楚了，结果很简单:

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>  

拥有尽可能多的img.

Have as many img as you like.

进一步，使用CSS隐藏<input>，然后一旦它捕获到<image>的点击，就会通过JS触发对<input>的点击:

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 (触发点击)

$(".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);
    });
});

最后，您将使用HTML5画布完成其余工作(如今，除了Opera Mini(截至2017年10月上旬，全球用户份额约为2,81％)之外，几乎所有内容都支持它.)

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:

函数resize_and_draw(输入，targetH){

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!

这篇关于上传img(通过单击< image&gt ;，而不是< input type = file>)，并在以下< img>中进行显示，客户端调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！