AndroidIn these days jQuery and Ajax are so popular in web development. One of my clients told me that, they want to upload multiple files without clicking button. That's why I have had an idea to integrate jQuery, Ajax and PHP.
Create Upload Button like
1<div id="upload_button">Upload</div>
Write following simple coding in your upload form
1// You must create it only after the DOM is ready for manipulations
2// Use $(document).ready for jquery
3// document.observe("dom:loaded" for prototype
4new AjaxUpload('upload_button_id', {action: 'upload.php'});
Configure at Ajax Upload
2// Use $(document).ready for jquery
3// document.observe("dom:loaded" for prototype
4new AjaxUpload('upload_button_id', {action: 'upload.php'});
1new AjaxUpload('#upload_button_id', {
2 // Location of the server-side upload script
3 action: 'upload.php',
4 // File upload name
5 name: 'userfile',
6 // Additional data to send
7 data: {
8 example_key1 : 'example_value',
9 example_key2 : 'example_value2'
10 },
11 // Submit file after selection
12 autoSubmit: true,
13 // The type of data that you're expecting back from the server.
14 // Html (text) and xml are detected automatically.
15 // Only useful when you are using json data as a response.
16 // Set to "json" in that case.
17 responseType: false,
18 // Fired after the file is selected
19 // Useful when autoSubmit is disabled
20 // You can return false to cancel upload
21 // @param file basename of uploaded file
22 // @param extension of that file
23 onChange: function(file, extension){},
24 // Fired before the file is uploaded
25 // You can return false to cancel upload
26 // @param file basename of uploaded file
27 // @param extension of that file
28 onSubmit: function(file, extension) {},
29 // Fired when file upload is completed
30 // WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE!
31 // @param file basename of uploaded file
32 // @param response server response
33 onComplete: function(file, response) {}
34});
2 // Location of the server-side upload script
3 action: 'upload.php',
4 // File upload name
5 name: 'userfile',
6 // Additional data to send
7 data: {
8 example_key1 : 'example_value',
9 example_key2 : 'example_value2'
10 },
11 // Submit file after selection
12 autoSubmit: true,
13 // The type of data that you're expecting back from the server.
14 // Html (text) and xml are detected automatically.
15 // Only useful when you are using json data as a response.
16 // Set to "json" in that case.
17 responseType: false,
18 // Fired after the file is selected
19 // Useful when autoSubmit is disabled
20 // You can return false to cancel upload
21 // @param file basename of uploaded file
22 // @param extension of that file
23 onChange: function(file, extension){},
24 // Fired before the file is uploaded
25 // You can return false to cancel upload
26 // @param file basename of uploaded file
27 // @param extension of that file
28 onSubmit: function(file, extension) {},
29 // Fired when file upload is completed
30 // WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE!
31 // @param file basename of uploaded file
32 // @param response server response
33 onComplete: function(file, response) {}
34});
Add following coding in your upload form
1//You can use these methods, to configure AJAX Upload later.
2var upload = new AjaxUpload('#div_id', 1, {action: 'upload.php'});
3//For example when user selects something, set some data
4upload.setData({'example_key': 'value'});
5
6//Or you can use these methods directly inside event function
7new AjaxUpload('div_id', 1, {
8action: 'upload.php', 1,
9onSubmit: function() {
10// allow only 1 upload
11this.disable();
12}
13});
14});
2var upload = new AjaxUpload('#div_id', 1, {action: 'upload.php'});
3//For example when user selects something, set some data
4upload.setData({'example_key': 'value'});
5
6//Or you can use these methods directly inside event function
7new AjaxUpload('div_id', 1, {
8action: 'upload.php', 1,
9onSubmit: function() {
10// allow only 1 upload
11this.disable();
12}
13});
14});
Here is server-side script, upload.php
1move_uploaded_file($_FILES["file"]["tmp_name"],
2"upload/" . $_FILES["file"]["name"]);
2"upload/" . $_FILES["file"]["name"]);
Best Credit To : http://valums.com/ajax-upload
Top of Page