Javascript multiple files upload trick
When you want to have multiple files upload form in your web-page, most of the times you find too many limitations and you change your codes back to small number of files upload in the page. Here, I have a nifty way to overcome some of the issues of multiple files upload by using only simple javascript.
There are many restrictions to the <input type=”file”> html element, because of security reasons. The value property of the element is read-only, you cannot filter the file-types in the file selection dialog box, you cannot get any information in javascript of the file that is selected (vital information such as file size, which means you cannot restrict file of huge size). The processing can only be done in server side scripts after the file is uploaded. (In IE you can use ActiveX controls to get such information accessible in javascript).
There is also the limitation of bandwidth in client side. During large sized files uploads, the request may time-out and entire request may terminate without doing anything. When in multiple files upload scenario, you may find this limitation irritating - no file is processed if the request is terminated. You would wish if you could only process/save those files that are completely uploaded before request termination and then display error message for remaining files. But you have no control! Web-hosts add more limitations - especially if you have shared web hosting. You have your account properties like web script timeout, maximum request size, etc.
By moving with technology speed, you may want to achieve this system using Web 2.0. If that is your interest, I have another post for “Uploading files using asp.net ajax extensions.” But this post is for doing it with simple javascript only.
The trick of my method is using multiple forms, and using a hidden frame as the target of the form post. I am creating multiple forms using a javascript loop, just to make the total number of file upload fields variable (defined by TotalFileFields variable). Each form contains <input type=”file”> element. When upload button is called, each form is posted one-by-one, and thus dividing the process into multiple relayed requests.
<html>
<head>
<script type=”text/javascript”>
TotalFileFields = 5;
StartUpload = false;
CurrentFormID = 1;
function FilesUpload() {
while (1) {
if (CurrentFormID > TotalFileFields) return true;
if (eval(’document.frm’ + CurrentFormID + ‘.upFile.value’) == ”) {
CurrentFormID++;
continue;
}
break;
}
StartUpload = true;
eval(’document.frm’ + CurrentFormID + ‘.submit()’);
return false;
}
function myIFrame_OnLoad() {
if (!StartUpload) return;
CurrentFormID++;
if (FilesUpload()) {
StartUpload = false;
CurrentFormID = 1;
alert(’UPLOAD COMPLETE’);
}
}
function GenerateUploadForms() {
for (i = 1; i <= TotalFileFields; i++) {
document.write(’<form name=”frm’ + i + ‘” method=”post” action=”http://localhost/” target=”myIFrame” enctype=”multipart/form-data”>’);
document.write(’<input type=”file” name=”upFile”/></form>\n’);
}
}
</script>
</head>
<body>
<script type=”text/javascript”>GenerateUploadForms();</script>
<input type=”button” value=”UPLOAD” onclick=”FilesUpload();”/>
<iframe id=”myIFrame” name=”myIFrame” onload=”myIFrame_OnLoad();” style=”display:none;”></iframe>
If use with iframe, does these limitation is gone away?
chamnap
August 16, 2007