在以下场景中，如何使代码可用于多个文件文件对象

How to make the code workable for more than one file file object in following scenario?

本文关键字：文件 代码 用于 对象 何使      更新时间：2023-09-26

我有一个包含四个文件控件的表单。根据用户的选择，它们的数量可能会增加或减少。但其中至少有一个会保留在表格上

我想显示用户为每个文件控件选择的上传图像的图像缩略图。

我可以显示一个文件控件的缩略图，但不能使其适用于表单上的多个文件控件。

HTML表单代码如下：

<form action="add.php" role="form" method="post" enctype="multipart/form-data">
  <img src="http://localhost/prj/img/abc.jpeg" width="80" height="80">
  <input type="file" name="product_image[1]" id="product_image_1">
  <img src="http://localhost/prj/img/def.jpeg" width="80" height="80">
  <input type="file" name="product_image[2]" id="product_image_2">
  <img src="http://localhost/prj/img/lmn.jpeg" width="80" height="80">
  <input type="file" name="product_image[3]" id="product_image_3">
  <img src="http://localhost/prj/img/pqr.jpeg" width="80" height="80">
  <input type="file" name="product_image[4]" id="product_image_4">
  .
  .
  .
  .
  .
  and could be so on
</form>

jquery代码对我来说只适用于一个文件控制，如下所示：

HTML代码是：

<form id="form1" runat="server">
  <input type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" width="80" height="80"/>
</form>

jQuery代码：

$(document).ready(function() {
  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);
  });
});

js Fiddle链接为：http://jsfiddle.net/LvsYc/

当只有一个这样的文件字段时，上面的代码对我来说真的非常好。

但是，当可能存在多个这样的文件控件时，无法使相同的东西对表单可用。

有人能在这方面帮我吗？

感谢您花费宝贵的时间来理解我的问题。等待您宝贵的答复。

如果你想了解我的问题，请告诉我。

也许我对这个问题的回答会有所帮助：

$.fn.checkFileType = function (options) {
var defaults = {
    allowedExtensions: [],
    preview: "",
    success: function () {},
    error: function () {}
};
options = $.extend(defaults, options);
$previews = $(options.preview);
return this.each(function (i) {
    $(this).on('change', function () {
        var value = $(this).val(),
            file = value.toLowerCase(),
            extension = file.substring(file.lastIndexOf('.') + 1),
            $preview = $previews.eq(i);
        if ($.inArray(extension, options.allowedExtensions) == -1) {
            options.error();
            $(this).focus();
        } else {
            if (this.files && this.files[0] && $preview) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $preview.show().attr('src', e.target.result);
                    options.success();
                };
                reader.readAsDataURL(this.files[0]);
            } else {
                options.error();
            }
        }
    });
  });
};

您可以按如下方式使用上述功能：

$('.fileUpload').checkFileType({ // where fileUpload is the common class given for file upload elements
  allowedExtensions: ['jpg', 'jpeg',"gif"], // allowed extensions
  preview: ".preview", // where .preview is the common class given for file upload elements
  success: function () {
    alert('success')
  },
  error: function () {
    alert('Error');
  }
});

图像将被设置为preview选项中指定的jQuery选择器匹配的元素集中<input>索引处的元素的src。

演示

相关文章：