图片上传脚本更具动态性

Question

我有一个工作脚本，显示一个用户想要上传的图像预览，这对于一个单独的图像上传工作很好。我现在使用这个脚本上传多个图像，并希望脚本中的readURL函数动态工作，这样我就不必重复这些行

 $("#patient_pic1").live("change",function(){
        readURL(this, "#preview_image1")
     });

对于每个上传容器

这是我的html

<div class="upload-file-container"> <img id="preview_image1" class="preimg" src="#" alt="" />
  <input type="file"  id="patient_pic1" name="pic[]" class="photo" />
</div>
<div class="upload-file-container"> <img id="preview_image2" class="preimg" src="#" alt="" />
  <input type="file"  id="patient_pic2" name="pic[]" class="photo" />
</div>

和Jquery

function readURL(input, target) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            var image_target = $(target);
            reader.onload = function (e) {
                image_target.attr('src', e.target.result).show();
            };
            reader.readAsDataURL(input.files[0]);
         }
     }

          $("#patient_pic1").live("change",function(){
    readURL(this, "#preview_image1")
 });
       $("#patient_pic2").live("change",function(){
readURL(this, "#preview_image2")
 });

http://jsfiddle.net/6j1kr549/1/

Answer 1

你可以像这样做：

 $('input[type="file"]').on("change",function(){
     var target = '#'+$(this).parent().find('img').attr('id');
    readURL(this, target);
 });

Answer 2

您应该使用each()函数来循环所有具有相同名称的类，并获取类中每个元素的输入控件: PD: Counter用于澄清，但它是函数：

var counter = 1;
$('.upload-file-container').each(function() {
    $(this, "#patient_pic" + counter.toString()).live("change",function(){
        readURL(this, "#preview_image" + counter.toString())
     });
     counter = counter + 1;
});