jquery - 上传文件并在同一页面显示

Question

HTML:

<input name="fileToUpload" type="file" id="fileToUpload"/>
<div id="div1"> </div>

Jquery:

$(function()
{
   $("#fileToUpload").on('change', 'input' ,  function(){
   // Display image on the page for viewing
        readURL(this,"div1");

   });
});

function readURL(input , tar) {  
if (input.files && input.files[0]) { // got sth

    // Clear image container
    $("#" + tar ).empty(); 

    $.each(input.files , function(index,ff)  // loop each image 
    {

        var reader = new FileReader();

        // Put image in created image tags
        reader.onload = function (e) {
            $('#' + tar).attr('src', e.target.result);
        }
        reader.readAsDataURL(ff);

    });
}   

我想显示上传到 div 容器的图像，但是我的代码不起作用。知道如何让它发挥作用吗？

Answer 1

问题是，你是

1. 尝试在 div 上设置 src 属性
2. 错误地使用了 on() 的第二个参数(它是一个选择器字符串，用于过滤触发事件的所选元素的后代)

$("#fileToUpload").on('更改', '输入' , function(){

变成了

$("#fileToUpload").on('change', function(){

然后你的 div 就变成了一个 img。

完整解决方案:

<input name="fileToUpload" type="file" id="fileToUpload"/>
<img id="preview" />

$(function() {
  $("#fileToUpload").on('change', function() {
    // Display image on the page for viewing
    readURL(this, "preview");

  });
});

function readURL(input, tar) {
  if (input.files && input.files[0]) { // got sth

    // Clear image container
    $("#" + tar).removeAttr('src');

    $.each(input.files, function(index, ff) // loop each image 
      {

        var reader = new FileReader();

        // Put image in created image tags
        reader.onload = function(e) {
          $('#' + tar).attr('src', e.target.result);
        }

        reader.readAsDataURL(ff);

      });
  }
}

工作 fiddle :https://jsfiddle.net/u7ww6bwv/