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

Question

I've a form containing four file controls. They may get increase and decrease in number depending on user's choice. But at least one of them will remain on a form.

I want to display the image thumbnail of the image selected by user for upload for each of these file controls.

I'm able to display the thumbnail image for one file control but not able to make it workable for more than one file control on a form.

The HTML form code is as below :

<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>

The jquery code which worked for me for only one file control is as follows:

HTML code is :

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

jQuery code :

$(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 link is : http://jsfiddle.net/LvsYc/

The above code worked really very fine for me when there is only one such file field.

But not able to make the same thing workable for a form when there could be more than one such file controls are present.

Can someone please help me in this regard?

Thanks for spending some of your valuable time in understanding my issue. Waiting for your precious replies.

If you want any information regarding my question please do let me know.

Answer 1

Probably my answer to this question will help:

$.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();
            }

        }

    });

  });
};

You can use the above function as follows:

$('.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');
  }
});

The image will be set as the src of element at the index of your <input> among the set of elements matched by the jQuery selector specified in preview option.

Demo