Tips for implementing a loop within the file input change event

Question

Tips for implementing a loop within the file input change event

Hello everyone, I need assistance with the code below.


function fileValidation() {
  var fileInput = document.getElementById('filech');
  var filePath = fileInput.value;
  var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
  if (!allowedExtensions.exec(filePath)) {
    alert('error .jpeg/.jpg/.png/.gif ');
    fileInput.value = '';
    return false;
  } else {
    //Image preview
    if (fileInput.files && fileInput.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) {
        document.getElementById('imagePreview').innerHTML = '<img src="' + e.target.result + '"/>';
      };
      reader.readAsDataURL(fileInput.files[0]);
    }
  }
}

To upload multiple photos:

<input id="filech" type="file" name="file_img[]" multiple onchange="return fileValidation()" />

Then display the images in the section below:

<div id="imagePreview"></div>

I would like to display all uploaded pictures at once instead of one by one. Can someone guide me on how to use a loop for this? Thank you in advance!

javascript file loops for-loop dom

Answer 1

Answer №1

To accomplish this task using a loop, you can implement a for loop as shown below:

    for (var i = 0; i < fileInput.files.length; i++) {
      if (fileInput.files && fileInput.files[i]) {
        var reader = new FileReader();
        reader.onload = function(e) {
          document.getElementById('imagePreview').innerHTML += '<img src="' + e.target.result + '"/>';
        };
        reader.readAsDataURL(fileInput.files[i]);
      }
    }

Note:

It's important to note the change made to

document.getElementById('imagePreview').innerHTML +=

, ensuring that all iterated images are displayed in the preview section instead of replacing each other.

An alternative approach would be to create an img element for each image during iteration and append it to the preview div like so:

for (var i = 0; i < fileInput.files.length; i++) {
  if (fileInput.files && fileInput.files[i]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      var img = document.createElement("img");
      img.src = e.target.result;
      document.getElementById('imagePreview').appendChild(img);
    };
    reader.readAsDataURL(fileInput.files[i]);
  }
}

Demo:

function fileValidation() {
  var fileInput = document.getElementById('filech');
  var filePath = fileInput.value;
  var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
  if (!allowedExtensions.exec(filePath)) {
    alert('error .jpeg/.jpg/.png/.gif ');
    fileInput.value = '';
    return false;
  } else {
    //Image preview
    for (var i = 0; i < fileInput.files.length; i++) {
      if (fileInput.files && fileInput.files[i]) {
        var reader = new FileReader();
        reader.onload = function(e) {
          var img = document.createElement("img");
          img.src = e.target.result;
          document.getElementById('imagePreview').appendChild(img);
        };
        reader.readAsDataURL(fileInput.files[i]);
      }
    }
  }
}

<input id="filech" type="file" name="file_img[]" multiple onchange="return fileValidation()" />


<div id="imagePreview"></div>

Answer 2

To accomplish this task using a loop, you can implement a for loop as shown below:

    for (var i = 0; i < fileInput.files.length; i++) {
      if (fileInput.files && fileInput.files[i]) {
        var reader = new FileReader();
        reader.onload = function(e) {
          document.getElementById('imagePreview').innerHTML += '<img src="' + e.target.result + '"/>';
        };
        reader.readAsDataURL(fileInput.files[i]);
      }
    }

Note:

It's important to note the change made to

document.getElementById('imagePreview').innerHTML +=

, ensuring that all iterated images are displayed in the preview section instead of replacing each other.

An alternative approach would be to create an img element for each image during iteration and append it to the preview div like so:

for (var i = 0; i < fileInput.files.length; i++) {
  if (fileInput.files && fileInput.files[i]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      var img = document.createElement("img");
      img.src = e.target.result;
      document.getElementById('imagePreview').appendChild(img);
    };
    reader.readAsDataURL(fileInput.files[i]);
  }
}

Demo:

function fileValidation() {
  var fileInput = document.getElementById('filech');
  var filePath = fileInput.value;
  var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
  if (!allowedExtensions.exec(filePath)) {
    alert('error .jpeg/.jpg/.png/.gif ');
    fileInput.value = '';
    return false;
  } else {
    //Image preview
    for (var i = 0; i < fileInput.files.length; i++) {
      if (fileInput.files && fileInput.files[i]) {
        var reader = new FileReader();
        reader.onload = function(e) {
          var img = document.createElement("img");
          img.src = e.target.result;
          document.getElementById('imagePreview').appendChild(img);
        };
        reader.readAsDataURL(fileInput.files[i]);
      }
    }
  }
}

<input id="filech" type="file" name="file_img[]" multiple onchange="return fileValidation()" />


<div id="imagePreview"></div>

Tips for implementing a loop within the file input change event

Answer №1

Similar questions

How to efficiently handle conditional rendering in React when passing data from Children to Parent

AngularJS meta tags featuring dynamic asynchronous content

Sending a object as an argument to a function

Gather a linear array of deeply nested information

Obtain the value from the controller of the amazing-rating component

Creating a mesmerizing parallax effect for your image: A step-by-step guide

Ensure that the date range picker consistently shows dates in a sequential order

Add the file to the array field

Once the ajax request is finished, load only the <script> tags that have specific ids

The calculation of Value Added Tax does not involve the use of jQuery

Retrieving the value from a concealed checkbox

Checking password fields in Angular upon submission or when they have been edited

The protocol at msa port 587 is unidentified with SSL23_GET_SERVER_HELLO

Creating a vendor bundle in create-react-appReady to optimize your create-react

JavaScript - Deleting the last element of an array

What is the best way to submit form data along with an image using Angular?

Access the JavaScript array within a click function by dynamically generating the array name

Scripts fail to load randomly due to RequireJs

Problem encountered with Blueimp gallery and Twitter Bootstrap

What is the Most Effective Way to Arrange an Array of Objects Based on Property or Method?