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

问题是，你是

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

$("#fileToUpload").on('change', 'input' , 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);

      });
  }
}

工作小提琴：https://jsfiddle.net/u7ww6bwv/

在同一页面上传文件和显示

1 个答案: