How to show upload image preview using jquery before form submit in a div

Question

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.

You need to actually upload the image to your server to be able to display a preview. AJAX should be where you start looking. — RMcLeod, May 30 '12 at 14:19
this library http://valums.com/ajax-upload/ allows you to upload files without submitting the form — RMcLeod, May 30 '12 at 14:25
` language="javascript"` is obsolete. Use `type="text/javascript"` or omit it completely. — ThiefMaster, May 30 '12 at 14:25
@RMcLeod I already have a better code than this but this is not working for multiple image handling and how do i insert into my jquery code. Check this link and let me suggest something :) http://pastebin.com/cbLLBArm — swapnesh, May 30 '12 at 14:31
possible duplicate of [Preview an image before it is uploaded](http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded) — Diodeus - James MacFarlane, May 30 '12 at 14:33
@Diodeus i am aware of this post and check my link, when iam not able to synchronize this with my code then only i asked — swapnesh, May 30 '12 at 14:37
Okay I see you're using JS FileReader, you need to be aware this doesn't work in IE versions older than 10, Safari, iOS and Android older than 3.0 according to http://caniuse.com/#feat=filereader — RMcLeod, May 30 '12 at 14:46
@RMcLeod yeah thats why i have attached this with the initial code..problem sounds easy and general but on the grounds its really itching my brain :( — swapnesh, May 30 '12 at 14:48
Here is similar implementation with jquery image upload codeigniter http://www.webwavers.com/blog/jquery-gallery-image-upload-with-sorting/ Regards — phpexpert83, Sep 26 '12 at 17:28

score 7 · Accepted Answer · answered May 30 '12 at 16:18

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.

Here's a rundown of which browsers support FileReader API: http://caniuse.com/#feat=filereader Because IE is not one of them (surprise!) it doesn't look like a good approach. — Pawel Krakowiak, Sep 10 '12 at 09:56

score 1 · Answer 2 · edited Sep 23 '13 at 11:43

1

JSFiddle demo

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

edited Sep 23 '13 at 11:43

default locale

13,035
13
56
62

answered Jun 17 '13 at 16:49

Anna Gabrielyan

2,120
3
28
48

add style for images div #image{width:400px;height:300px} – Anna Gabrielyan Jun 17 '13 at 20:37
cause now i am putting the uploaded image as background, but div hasn't width and height, and you can't see it's background – Anna Gabrielyan Jun 17 '13 at 20:38
nice ..+1 for your efforts :) – swapnesh Jun 18 '13 at 03:42

How to show upload image preview using jquery before form submit in a div

2 Answers2

Linked

Related