Javascript 预览图像上载多个输入

我有3个输入类型的图像预览文件 问题是，当我尝试为一个输入上传一个图像时，它会影响所有其他输入。这是我的代码：

<input type='file' onchange="readURL(this);" />    
<img class="blah" src="http://placehold.it/180" alt="your image" />
<input type='file' onchange="readURL(this);" />
<img class="blah" src="http://placehold.it/180" alt="your image" />
<input type='file' onchange="readURL(this);" />
<img class="blah" src="http://placehold.it/180" alt="your image" />

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]);
  }
}

函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'.blah'）
.attr（'src'，e.target.result）；
};
reader.readAsDataURL（input.files[0]）；
}
}

函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（输入）.next（）
.attr（'src'，e.target.result）；
};
reader.readAsDataURL（input.files[0]）；
}
}

页面标题
img{
宽度：100px；
高度：100px；
}
函数readURL（输入）{
调试器
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
var-imageElementName=input.getAttribute（'data-result'）；
reader.onload=函数（e）{
调试器
//var-imageElementName=input.getAttribute（'data-result'）；
var el=document.getElementsByName（imageElementName）；
el[0].setAttribute（'src'，reader.result）；
//$（'.blah'）
//.attr（'src'，e.target.result）；
};
reader.readAsDataURL（input.files[0]）；
}
}

您告诉它在加载时将所有具有类“blah”的元素设置为该图像。如果你只想设置其中一个，你需要以某种方式告诉它。每个输入元素都需要知道应该更新哪个img元素。它们可以共享某些类或数据属性。或者被包装在一个div中（或者只是说“更新我以前的兄弟姐妹”，但这很脆弱。）不是

$（'.blah'）

，它应该是输入的下一个元素你的意思是我在attr中使用类似数据预览的东西吗？@mehrdad我发布了一个解决方案，检查一下