Question

请注意，我知道下面的代码远非诗歌而且我是初学者。考虑到这一点，我在<form>：

中跟随html

<div class="image-upload">
 <img id="send_photo_img1" src="assets/images/index2.png"/>
 <input id="send_photo_input1" type="file"/>
 <img id="send_photo_img2" src="assets/images/index2.png"/>
 <input id="send_photo_input2" type="file"/>
</div>

目标：一旦用户点击图片（index2.png，这是一个带有＆＃34; +＆＃34;符号的占位符），窗口就会从input = file打开，用户选择img并加载而不是占位符。

其余代码：

Jquery（基于@Ivan Bayev＆＃39; s answer here，虽然他的代码非常好，但我的行为非常笨拙..）

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").click(function(){
    $("#send_photo_input1").trigger("click");
    $("#send_photo_input1").change(function(){
        readURL(this);
    });         
});

CSS

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

有效。但是：（1）我觉得jQuery真的很糟糕，（2）最大的担忧 - 一旦显示图像而不是占位符，我仍然有＃34; loading＆＃34;签约30-40秒。然后它消失了。

任何建议都是非常有用的。谢谢！

Answer 1

如果有人对上述解决方案感兴趣，请点击此处。

首先，上面的代码附加到ID，如果input = file的许多实例在单页上，那么这是很糟糕的。所以首先将其重新连接到课程。每个块看起来像：

<div class="img_upload">
 <img class="send_photo_img" src="assets/images/index2.png"/>
 <input class="send_photo_input" type="file"/>
</div>

然后通过jQuery选择它需要一些解决方法：

$(".img_upload img").click(function(){
    var imgDiv = $(this).next(".send_photo_input");
    imgDiv.trigger("click");
    imgDiv.change(function(){
        //console.log('Display that to trace results');
        //your function here.
    });
});

CSS：

.img_upload input
{
    display: none; // hide original input
}
.img_upload img
{
    width: 90px;
    height: 90px;
    cursor: pointer;
}

我的问题中的ReadURL功能实际上是完美的，只需改变它：

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

到此：

reader.onload = function (e) {
   $(input).prev(".send_photo_img").attr('src', e.target.result);
}

请注意，我使用prev()，而您可以使用更一般的内容：

 $(input).parent().find(".send_photo_img").attr('src', e.target.result);

请注意，您可以使用图标而不是img来获得更好的效果。

这个答案只是为了让您了解上述问题的工作代码。如果需要，请随时询问其他详细信息。

单击img占位符以上载图像而不是该占位符

1 个答案: