Uploading multiple files is a major task for webmasters, which consumes a lot of time and requires proper software. AJAX provides a simple and convenient way to upload many bits of information by not once again loading the full page. It is simpler to view activity as AJAX is executed by HTML documents. To create the Ajax function you must have JavaScript and Basic HTML knowledge. AJAX Upload allows for the easier download of multiple files with no page refreshing and a file selection window can be seen by opting for any webmaster tool or element. AJAX runs on all main browsers, and the AJAX 2.0 doesn't require any library files; just download it, and run. AJAX is compatible with major JavaScript libraries as jQuery, PrototypeJS, and webmaster Mootools.
[Ajax] Javascript - Multiple upload
Introduction
AJAX Upload allows you to easily download multiple files without refreshing the page and use any element to show the file selection window. It works for all major browsers and as from version 2.0, it does not require libraries to run. AJAX download does not pollute the global namespace, so it is compatible with jQuery, PrototypeJS, Mootools, and other JavaScript libraries.
Creating the upload
First, you must create the button (you can use anything).
Example:
<input id="button2" type="file">
Then you must create an instance to upload Ajax. In its simplest form, you can create using the following code:
new AjaxUpload('#button2', {
action: 'upload.php',
onSubmit : function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
// extension is not allowed
alert('Error: invalid file extension');
// cancel upload
return false;
}
}
});
Server side script (upload.php)
If you use PHP, here's a simple example:
$uploaddir = '/var/www/uploads/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
echo "success";
} else {
// WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE!
// Otherwise onSubmit event will not be fired
echo "error";
}
Note that: you must add two libraries prototype
http://www.prototypejs.org/assets/2008/9/29/prototype-1.6.0.3.js and Ajax-upload
http://github.com/valums/ajax-upload/raw/master/ajaxupload.js.
Example source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./prototype.js"></script>
<script type="text/javascript" src="./ajaxupload.js"></script>
<script>
new AjaxUpload('#button2', {
action: './upload.php',
onChange : function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif|txt)$/.test(ext))){
// extension is not allowed
alert('Error: invalid file extension');
// cancel upload
return false;
}
}
});
</script>
</head>
<body>
<form action="#" method="get">
<input id="button2" type="file">
</form>
</body>
</html>
Downloading mutiple files (Ajax)
Using the same library, but with other javascript techniques we can upload multiple files.
1 - Using JavaScript DOM to create lines of downloading.
2 - JavaScript function (EVAL) to evaluate instance of each line being generated.
Example source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./prototype.js"></script>
<script type="text/javascript" src="./ajaxupload.js"></script>
<script>
var count_annex = 0;
var champ_annex = "";
var annex_suivant = 0;
function add_annex(id){
annex_suivant = count_annex + 1;
var tbody = $(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR");
var td1 = document.createElement("TD");
td1.appendChild(document.createTextNode("column "+annex_suivant));
var td2 = document.createElement("TD");
td2.innerHTML = '<input type="button" value = "Parcourir" id="annexadded'+count_annex+'"/>';
row.appendChild(td1);
row.appendChild(td2);
tbody.appendChild(row);
eval(new AjaxUpload('#annexadded'+count_annex, {
action: './upload.php',
onChange : function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif|txt)$/.test(ext))){
// extension is not allowed
alert('Error: invalid file extension');
// cancel upload
return false;
}
}
})
);
champ_annex = "";
count_annex++;
}
</script>
</head>
<body>
<table id="myTable" cellspacing="0" border="1">
<tbody>
</tbody>
</table>
<a href="javascript:add_annex('myTable')">Add row</a>
</body>
</html>
Notes
Thanks to wjaouadi for this tip.
See also
Knowledge communities.
Published by
deri58 -
Latest update by Virginia Parsons 
