Using jQuery to preview a file before uploading

I want to display a photo selection using a file input dialog, but this code doesn't seem to execute and displays any errors:

var Box = $('.UploadBox');
var Image = $('.Image');
var Input = $('.UloadBox .File');
Box.hide()
$('.Photo .Upload').click(function () {
    Box.show();
    Input.change(function () {
        var File = this.files[0];
        var Reader = new FileReader();
        Reader.onload = function (e) {
            Image.attr('src', e.target.result);
        };
        Reader.readAsDataURL(this.files[0]);
    });
});

      

+3


source to share


1 answer


This is the solution I am using. It handles loading multiple images. If you want to provide the ability to upload only one image at a time, you can simply change the HTML for the input element. For any of these inputs, the provided javascript triggering results in the same execution. Then it becomes a question that you are limiting the file upload to one or more files.

For multiple files: <input type="file" id="files" name="files[]" multiple />


For one file:<input type="file" id="files" name="file" />



var numDocuments = 0;
var numDocumentsProcessed = 0;

function processFiles() {
  numDocuments = files.length;
  for (var i = 0, f; f = files[i]; i++) {
    var fileReader = new FileReader();
    fileReader.onloadend = (function (file) {
      return function (evt) {
        doSomethingWithFile(evt, file)
      }
    })(f);
    fileReader.readAsDataURL(f);
  }
}

function onFilesSelected(event) {
  files = event.target.files; // FileList object
  processFiles();
}

function doSomethingWithFile(evt, file) {
  var key = file.name;
  var value = evt.target.result;
  var container = document.getElementById('image-container');
  var image = document.createElement('img');
  image.src = evt.target.result;
  container.appendChild(image);
  if (++numDocumentsProcessed === numDocuments) {
    //final steps after final image processed
  }
}

document.getElementById('files').addEventListener('change', onFilesSelected, false);
      

<input type="file" id="files" name="files[]" multiple />
<br>
<div id="image-container"></div>
      

Run code


+1


source







All Articles