How to show upload image preview using jquery before form submit in a div
Solution 1
You need to loop through the files array from the multiple input and use the FileReader API on each.
I've set up the HTML like this:
<input type="file" multiple="true" id="files" />
<input type="submit" id="go"/>
<div id="images"></div>
Then the javascript as follows:
// set up variables
var reader = new FileReader(),
i=0,
numFiles = 0,
imageFiles;
// use the FileReader to read image i
function readFile() {
reader.readAsDataURL(imageFiles[i])
}
// define function to be run when the File
// reader has finished reading the file
reader.onloadend = function(e) {
// make an image and append it to the div
var image = $('<img>').attr('src', e.target.result);
$(image).appendTo('#images');
// if there are more files run the file reader again
if (i < numFiles) {
i++;
readFile();
}
};
$('#go').click(function() {
imageFiles = document.getElementById('files').files
// get the number of files
numFiles = imageFiles.length;
readFile();
});
I've set up a JSFiddle to demo http://jsfiddle.net/3LB72/
You'll probably want to do more checks on whether the browser the user is using has FileReader and if the files they have chosen are image files.
Solution 2
This is much better, without clicking any button :D
HTML:
<input type="file" multiple="true" id="files" />
<input type="submit" id="go"/>
<div id="images"></div>
JavaScript:
// set up variables
var reader = new FileReader(),
i=0,
numFiles = 0,
imageFiles;
// use the FileReader to read image i
function readFile() {
reader.readAsDataURL(imageFiles[i])
}
// define function to be run when the File
// reader has finished reading the file
reader.onloadend = function(e) {
// make an image and append it to the div
$("#images").css({'background-image':'url('+e.target.result+')'});
// if there are more files run the file reader again
if (i < numFiles) {
i++;
readFile();
}
};
$('#files').live('change', function(){
imageFiles = document.getElementById('files').files
// get the number of files
numFiles = imageFiles.length;
readFile();
});
swapnesh
#SOreadytohelp In love with MEAN & MERN stack, ex was LAMP. Feel free to contact me at- [email protected]
Updated on September 24, 2020Comments
-
swapnesh over 3 years
I am dealing with a form that contains various form elements with an option to upload multiple images(upto 6 max). Now i am having a div
preview
on clicking that div i fetch all form fields using jquery (form still not submitted at this time as its a multi form step1, 2 and 3). Now the problem is that i am fetching all form data with this code -var allFormData = $("#myform").serializeArray();
Using this another code i am able to show rest of the data in div, but image is not coming.
$.each(adtitletoshow, function(i, field){ if( field.name == 'desc'){ $(".add_desc").text(field.value); } });
This is the filed created by JS to upload image.
<script type="text/javascript"> var total_images = 1 ; function add_file_field () { total_images++ ; if ( total_images > 6 ) return ; var str_to_embed = '<input name="fileImage[]" size="40" style="width: 500px;" type="file" onChange="add_file_field()"><br>' ; $("#image_stack").append ( str_to_embed ) ; } </script>
All things going on single page so i need a solution that how can i load images under my preview div. Let me know if thr is some point of ambiguity still persists.