Question

我试图在上传图像时显示图像。

我有以下代码，适用于单个表单输入：

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

    <img width="50px" id="blah" src="#" alt="your image" />

但是，每页都有多个表单，所有表单都具有相同的功能 - 每个表单在上传后都显示一个图像。

如何才能使这项功能适用于多种动态表单？

Answer 1

function readURL(input) {
    var file = input.files[0];

    if(file)
    {
      var reader = new FileReader();

      reader.readAsDataURL(file);

      reader.onload = function (e) {
          $(input).parents().find('img.blah').attr('src', e.target.result)
      }
    }
}

$("#imgInp").change(function(){
    readURL(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <img width="50px" class="blah" src="#" alt="your image" />

     <input type="file" id="imgInp" name="img" />
</div>

在上传时动态显示多个表单的图像

1 个答案: