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>
+1
source to share