上传前的脚本jQuery图像预览

Question

上传前的jQuery图像预览脚本在同一页面的多个项目上调用时不起作用。我更改了脚本中的ID，以便它可以应用于各自的图像，但它不能按预期工作。

我做了一个的jsfiddle：
http://jsfiddle.net/LvsYc/6977/

它的代码：

<form id="form1"> 
    <input type='file' id="imgInp" /> 
    <img id="blah" src="#" alt="your image1" /> 
</form> 

<form id="form2"> 
    <input type='file' id="imgInp2" /> 
    <img id="blah2" src="#" alt="your image2" /> 
</form> 

的jQuery：

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

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

     reader.readAsDataURL(input.files[0]); 
    } 
} 

$("#imgInp").change(function(){ 
    readURL(this); 
}); 

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

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

     reader.readAsDataURL(input.files[0]); 
    } 
} 

$("#imgInp2").change(function(){ 
    readURL(this); 
}); 

Answer 1

所有你需要做的是改变第二个功能readURL到与readURL2不同的名称 解决小提琴here

它为我工作。

function readURL2(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

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

     reader.readAsDataURL(input.files[0]); 
    } 
} 

$("#imgInp2").change(function(){ 
    readURL2(this); 
}); 

好运