javascript - 如何分别上传 4 个不同的表单字段

Question

我这里有一个上传表单:

http://jsfiddle.net/3rxpgsja/28/

正在为第一个字段上传。但是用户需要上传4张单独的图片。

   <h1> Field One </h1>
    <form id="form1" runat="server">
        <input type='file' id="imgInp" />
        <br>
        <img id="form-pic-1" src="http://i.imgur.com/zAyt4lX.jpg" alt="your image" height="100" />
    </form>
      <h1> Field Two </h1>
        <form id="form2" runat="server">
        <input type='file' id="imgInp2" />
        <br>
        <img id="form-pic-2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Spider-Firework-Omiya-Japan.jpg/220px-Spider-Firework-Omiya-Japan.jpg" alt="your image" height="100" />
    </form>

我为不同的字段添加了额外的 JS 代码:

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

            reader.onload = function (e) {
                $('#form-pic-1').attr('src', e.target.result);
            };

            reader.onload = function (e) {
                $('#form-pic-2').attr('src', e.target.result);
            };

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


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

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

但到目前为止只有第一张图片记录了变化。第二个上传表单注册上传图片的名称，但不会显示缩略图

Answer 1

问题是因为您在 DOM 中有多个元素具有相同的 id 属性，这是无效的。它们必须是唯一的。

要解决此问题，请更改元素以使用通用类。然后，您可以对所有这些事件使用一个事件处理程序。您还应该使用 DOM 遍历来查找与更改的文件输入相关的 .form-pic。试试这个:

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Field One</h1>
<form id="form1" runat="server">
  <input type="file" class="imgInp" /><br />
  <img class="form-pic" src="http://i.imgur.com/zAyt4lX.jpg" alt="your image" height="100" />
</form>

<h1>Field Two</h1>
<form id="form2" runat="server">
  <input type="file" class="imgInp" /><br />
  <img class="form-pic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Spider-Firework-Omiya-Japan.jpg/220px-Spider-Firework-Omiya-Japan.jpg" alt="your image" height="100" />
</form>