22
Jun
2009

Ajax form upload local image file without refresh

The code example below performs following tasks:

  • Upload multiple image files without refresh page.
  • Control maximum number of image files to be uploaded.
  • Instantly review uploaded images.

See it in action here

Download source code

Basic idea:

You have a Form #1 with input element with type “file” to let user to select what images to be uploaded. Also, you need a hidden Form #2 and hidden iframe to do the upload action implicitly. When user select a file, the value of input element needed in Form #2. However, for security reason, browsers are not allow us to manipulate the value of input element, therefore directly copy value of input element to another is not the way to achieve our goal. But, how about copy the whole input element to Form #2? Here is the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
 
<script  type="text/javascript">
var frameId = 'frame_ID';         //hidden frame id
var jFrame = null;                //hidden frame object
var formId = 'form_ID';           //hidden form id
var jForm = null;                 //hidden form object
var fileMax = 3;                  //maximum number of file to be uploaded
var fileCount = 0;                //file counter
var uploadUrl = "save.php";       //where to handle uploaded image
 
 
$(document).ready(function(){                     
 
jForm = createForm(formId);            //create hidden form
jFrame = createUploadIframe(frameId);  //create hidden iframe
 
//append hidden form to hidden iframe
jForm.appendTo('body');         
jForm.attr('target',frameId);          //make form target to iframe
 
//bind onchange function to input element
$("#inp").bind('change',startUpload); 
 
function startUpload(){
   if(jForm!=null){               
      jForm.remove();                        //re-create hidden form
      jForm = createForm(formId);
      jForm.appendTo('body');
      jForm.attr('target',frameId);
   }
 
   var newElement = $(this).clone(true);   //clone input element object
   newElement.bind('change',startUpload);  //bind onchange function. detect iframe changes
   newElement.insertAfter($(this));        //insert clone object to current input element object
   $(this).appendTo(jForm);                   
 
   jForm.submit();                         //let's upload the file
 
   jFrame.unbind('load');                  
   jFrame.load(function(){        //bind onload function to hidden iframe
 
      //get response message from hidden iframe
      var myFrame = document.getElementById($(this).attr('name'));   
      var response = $(myFrame.contentWindow.document.body).text();
 
      /*
      * you may handle upload status from reponse message.
      * in this example, upload succeeded if message contains ".gif" , otherwise, alert reponse message
      */
 
      if(response.indexOf('.gif')!=-1){ //upload successfully
 
         //show thumbnails, add text box with file name
         addUpload(Math.floor(Math.random()*100),response);   
         fileCount++;
         if(fileCount >= fileMax){   //reach maximum upload file, disable input element
            $("#inp").attr('disabled','disable');
         }
      }else{  //error
         alert(response);
      }
   });
}
 
 
});
 
function createUploadIframe(id){
   //set top and left to make form invisible
   return $('<iframe width="300" height="200" name="' + id + '" id="' + id + '"></iframe>')
         .css({position: 'absolute',top: '270px',left: '450px',border:'1px solid #f00'})
         .appendTo('body');
}
 
function createForm(formId) {
      return $('<form method="post" action="'+uploadUrl+'" name="' + formId + '" id="' + formId + 
            '" enctype="multipart/form-data" style="position:absolute;border:1px solid #f00;'+
            'width:300px;height:100px;left:450px;top:150px;padding:5px">' +
            '<strong>You should hide red blocks</strong><br><br></form>');
}
 
function addUpload(id,img){
   var div = $(document.createElement('div')).attr('id',id);
 
   //add uploaded image
   div.html("<img src='"+img+"'><br />");
 
   //add text box
   var fileName = img.substring(img.lastIndexOf("/")+1);
   var txtbx = $(document.createElement('input')).attr('name','img[]').attr('type','text').val(fileName);
   /* you may want to change textbox to a hidden field in production */
   //var txtbx = $(document.createElement('input')).attr('name','img[]').attr('type','hidden').val(fileName);
   txtbx.appendTo(div);
 
 
   //add remove thumbnail link
   var rem = $(document.createElement('a'))
                               .attr('alt',id)
                               .attr('href','javascript:;')
                               .text("Remove").click(removeUpload);      
   rem.appendTo(div);
 
   //add to the page
   div.appendTo("#uploaded_thumb");
}
 
function removeUpload(e){
   var removeId = $(e.target).attr('alt');
   $('#'+removeId).remove();
   if(fileCount>0) fileCount--;
   $("#inp").removeAttr('disabled');
}
</script>
 
</head>
<body>
  <form>   
   <div id='uploaded_thumb'></div>
 
   <div style='padding-top:20px'>
   upload a small GIF <input type='file' name='image' id='inp'>
   </div>
  </form>
</body>
</html>
  • Share/Save/Bookmark

Tags: , , ,
Posted in Javascript

11 Responses to “Ajax form upload local image file without refresh”

  1. Ajax form upload local image file without refresh | Adobe Tutorials says:
    June 23, 2009 at 12:11 am

    [...] The code example below performs following tasks: Upload multiple image files without refresh page. Here is the original: Ajax form upload local image file without refresh [...]

  2. hoolio says:
    September 30, 2009 at 2:55 am

    Doesnt work for me! I just get an error in the iframe and am alerted that save.php cannot be found.

    Would love it if you explained it a bit more clearly or even posted up a working demo.

    Anyways,

  3. Rick says:
    September 30, 2009 at 7:06 pm

    Hi hoolio,

    save.php is where you should handle uploaded images from the form. It should be located in your server, eg. http://your-domain.com/save.php

    I will post a working demo later.

    Thanks, hoolio.

  4. rick says:
    October 21, 2009 at 8:10 pm

    OK. Demo page is finally here.
    http://www.fengcool.com/demo/ajax_image_uploading/

  5. es says:
    December 17, 2009 at 5:51 am

    Remove image – don’t remove image from server :(

  6. rick says:
    December 17, 2009 at 3:51 pm

    Hi es,

    This demonstration only shows how to handle upload images. If you want to implement image removal from server, you must add another ajax call within function removeUpload(e){} and pass file name which need to be deleted. On server side, simple, just unlink() the file.

  7. Mark Baker says:
    January 4, 2010 at 8:53 am

    Hi there, I am trying to add a submit button rather than use the the change method on line 25 of the javascript

    Ive added a submit button with the id=’test’ and changed the function to a click rather than change.

    //bind onchange function to input element
    $(”#test”).bind(’click’,startUpload);

    when I try this the script loads but all I get back is an empty alert box? any ideas what I am doing wrong? – Great example BTW

  8. rick says:
    January 4, 2010 at 7:11 pm

    Hi Mark,

    Thank you for your comment.
    Let me clear something first. Does onchange works perfectly on your side? (I mean images are successfully uploaded to sever?)
    If it works, the button should work too.
    You may feel free to echo any message on “uploadUrl = ’save.php’;”, those messages will appear on alert box. By this way, you can debug if save image works or not.

  9. Mark Baker says:
    January 5, 2010 at 5:54 pm

    Hi Rick, thanks for getting back to me so quickly.

    Yes onchange is working perfectly and images are uploading fine, just for my purpose I really need an additional button as well the file input. Ive tried a few different ways this evening but still no luck? Ive even tried adding the function startUpload as an Onclick from the button in the form instead of the bind method and this also failed.
    Help?

  10. rick says:
    January 5, 2010 at 9:17 pm

    It sounds weird. Can you post your test url here so I can take a look?

    By the way, please make sure this line
    $(”#test”).bind(’click’,startUpload);
    should place inside of
    $(document).ready(function(){ …….. });

  11. Marco says:
    February 10, 2010 at 7:15 pm

    Hi all, many thanks for the script, i’m testing it but it seems to work only for Firefox. IE can’t show the picture immediatly like FF, i’v to change the focus and come back to the ajax form…
    I tried to change line 24 to
    $(”#inp”).bind(($.browser.msie ? “propertychange” : “change”),startUpload); //bind onchange function to input element

    but it works only for the first image… could you help me?

    Thanks

Leave a Reply