上传文件并在同一页上显示

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 容器的图片显示出来，但是我的代码不起作用。有什么办法让它工作？

- yan

---

你可以尝试这种方式 - http://www.w3bees.com/2013/08/ajax-image-upload-with-jquery.html ajax 和服务器端的 php - shakhawat

你能添加一个fiddle吗？ - Jonny

@user3029017 我不想保存文件，只想显示图片。 - yan

@Jonny 嗯...我不知道如何使用 Fiddle :| - yan

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/

- Jonny

---

谢谢。我会试一下。 - yan

它不起作用。但我有这个错误消息-->未捕获的引用错误：$未定义。 - yan

yan，请确保将jQuery作为外部资源包含进来。 - Jonny