Question

请查看我的Fiddle ...

我有一个文件上传按钮，工作正常。当你在小提琴中几乎没有向下滚动时，你会看到它。图片上传，但它会在页面底部上传，我正试图让它显示在div中，紧靠上传按钮下方。

HTML ...

`<input type='file' onchange="readURL(this);" /></label>
   <p>
      <strong>(Image will display below)</strong>
   </p>
      <div style="max-width: 100px; height: 100px; border:1px dashed black;">
   <img id="blah" src="#" alt="Your image goes here..." />
</div>`

JS ...

`$("input").change(function(e) {

    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {

        var file = e.originalEvent.srcElement.files[i];

        var img = document.createElement("img");
        var reader = new FileReader();
        reader.onloadend = function() {
             img.src = reader.result;
        }
        reader.readAsDataURL(file);
        $("input").after(img);
    }
});`

Answer 1

您正在使用after在input标记之后插入您的图片而不是图片。

要在div内插入您的图片，您需要在此div上设置选择器，如ID：

<input type='file' onchange="readURL(this);" /></label>
<p>
   <strong>(Image will display below)</strong>
</p>
<div style="max-width: 100px; height: 100px; border:1px dashed black;" id="whatever">
</div>

然后做：

$('#whatever").html(img);

Answer 2

更改div中已有图像的src属性。以下代码应该做你想要的。

`$("input").change(function(e) {

    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {

        var file = e.originalEvent.srcElement.files[i];

        var reader = new FileReader();
        reader.onloadend = function() {
             $('#blah').attr('src', reader.result);
        }
        reader.readAsDataURL(file);        }
});`

获取要在div中上传和显示的图像

2 个答案: