Posts Tagged ‘ajax’

22
Jun
2009

Ajax form upload local image file without refresh

11 Comments

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

read more