...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<!-- multiple file uploading example by Chun Kang -->
<html>
<head>
<title>PHP upload file demo</title>
</head>
<script>
function _(el)
{
return document.getElementById(el);
}
function formatNumber(num) {
return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}
var upload_index=0;
var upload_obj_id;
var upload_filename;
function completeCTHandler(event)
{
// _(upload_obj_id).innerHTML = event.target.responseText;
uploadFiles(upload_index);
}
function progressCTHandler(event)
{
if (event.lengthComputable)
{
var percentage = Math.round(event.loaded/event.total*100);
_(upload_obj_id).innerHTML
= upload_filename + " - " + formatNumber(event.loaded) + "/" + formatNumber(event.total) + " bytes uploaded (" + percentage.toString() + "%)<br>"
+ "<progress id=\"progressBar\" value=\"" + percentage.toString() + "\" max=\"100\"></progress><br>";
}
}
function uploadFiles(i)
{
if (!i)
{
_("upload_form").style.display = "none";
_("upload_info").innerHTML = "";
}
upload_index=i;
// var file = _("customthumbnail").files[0];
total_files = _("files").files.length;
if (i<total_files)
{
upload_index++;
upload_obj_id = "upload_info" + upload_index.toString();
upload_filename = _("files").files[i].name;
_("upload_info").innerHTML += "<div id=\"" + upload_obj_id + "\"></div>";
var formdata = new FormData();
formdata.append("whoami", "CK");
formdata.append("files[]", _("files").files[i]);
var ajax = new XMLHttpRequest();
ajax.addEventListener("load", completeCTHandler, false);
ajax.upload.addEventListener("progress", progressCTHandler, false);
ajax.open("POST", "submit_upload.php");
ajax.send(formdata);
}
}
</script>
<body>
<div id="upload_form">
<form method="post" enctype="multipart/form-data" name="formUploadFile">
<label>Select files to upload:</label>
<input type="file" id="files" name="files[]" multiple="multiple" />
<input type="button" value="Upload File" onClick="uploadFiles(0)"/>
</form>
</div>
<div id="upload_info"></div>
</body>
</html>
|
...