<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>HTML5 对于多文件选择的增强Demo</title>
<script type="text/javascript" src="md5.js"> </script>
</head>
<p>multiple文件选择 FileList Demo:</p>
选择文件：
<input type="file" id="multifile" multiple size="80" onchange="handleFiles(this.files)"/>
<input type="button" onclick="uploadfilesfun()" value="文件上传" />
<div id='uploadinfo'></div>
<script type="text/javascript">
var filenum;
var arrayurl = new Array();
var progressarray = new Array();
var nexturl = "#";
var arrayblob = new Array();
var uploadnow;
var filelist = new Array();
function handleFiles(files)
{
filenum = 0;
var uploadctrl = document.getElementById('uploadinfo');
//每次选择上传文件即将原来上传文件清空
while(uploadctrl.hasChildNodes()) //当div下还存在子节点时 循环继续
{
uploadctrl.removeChild(uploadctrl.firstChild);
}
if(files.length)
{
console.log(" FileList Demo:");
var file;
//取得FileList取得的file集合
blobreadnow = 0;
for(var i = 0 ;i<document.getElementById("multifile").files.length;i++){
//file对象为用户选择的某一个文件
file=document.getElementById("multifile").files[i];
//进度显示控件初始化
var divobj = document.createElement("div");
divobj.id="div_"+file.name;
divobj.name = "div_"+file.name;
divobj.className = "ty"
var progressobj = document.createElement("progress");
progressobj.id="progress_"+file.name;
progressobj.name = "progress_"+file.name;
progressobj.className = "tyy"
progressobj.value=0;
divobj.innerHTML=(file.name);
progressarray[i] = progressobj;
document.getElementById("uploadinfo").appendChild(divobj);
document.getElementById("uploadinfo").appendChild(progressobj);
//将文件添加到文件类表
filelist[i] = file;
}
}
filenum = files.length;
}
function uploadfilesfun()
{
filedownnow = 0;
var filesobj = document.getElementById('multifile');
if(filesobj.files.length<=0)
alert("you have not select files");
for(var i=0;i<document.getElementById("multifile").files.length;i++){
file=document.getElementById("multifile").files[i];
//此时取出这个文件进行处理，这里只是显示文件名
/*var bucket = 'bucketname'; /// 空间名
var form_api_secret = 'upload api key'; /// 表单 API 看你用的是什么上传api了，本例是某云存储的api大家可以参考
var url = "your upload cloud storage url"+bucket;
$options = array();
var now = new Date();
var time = now.getTime()+600;
var path = "test/"+file.name;
var ja = {'bucket':bucket,'expiration':time,'save-key':path};
$options['bucket'] = $bucket;
$options['expiration'] = time()+600;
$options['save-key'] = file.name; ///存储文件名
var policyj = JSON.stringify(ja);
alert(policyj);
var policy = base64encode(policyj);
var signature = faultylabs.MD5(policy+'&'+form_api_secret); //
arraypolicy[i] = policy;
arraysignature[i] = signature;
*/
url = "http://testupload/upload.jsp";//自己设置自己的上传服务器处理脚本
arrayurl[i] = url;
}
/*数据准备完毕，开始读取第一个文件并上传*/
uploadnow = 0;
uploadafterread(uploadnow);
}
function uploadafterread(i)
{
alert("i="+i+filelist[i].name);
var reader = new FileReader();
reader.onloadend = function(e) { after_read_file(e); }
reader.readAsArrayBuffer(filelist[i]); //读取这个文件，读取进度完毕执行上面的回调函数
}
function after_read_file(evt)
{
if (evt.target.readyState != FileReader.DONE) // DONE == 2
return;
var abuf=evt.target.result;
var blob = new Blob([abuf]);
var formData = new FormData();
//formData.append('policy', arraypolicy[uploadnow]);
//formData.append('signature', arraysignature[uploadnow]);
formData.append('file', blob);
var xhr = new XMLHttpRequest();
xhr.open('POST', arrayurl[uploadnow], true);
xhr.onload = function(e) { onload(e); }
xhr.onerror = function(e) { onerror(e); }
xhr.upload.onprogress = function(e) { onprogress(e); }
xhr.send(formData);
}
//每一个文件上传完毕就将uploadnow增加1，并调用读取下一个文件的文件的函数进行上传
function onload(evt)
{
progressarray[uploadnow].value = (100);
if (nexturl&&uploadnow==filenum-1)
window.location.href = nexturl;
else
{
uploadnow = uploadnow + 1;
uploadafterread(uploadnow);
}
}
onerror = function(e)
{
alert('An error occured during uploading, please try again later!');
progressarray[uploadnow].value = (0);
}
function onprogress(evt)
{
if (evt.lengthComputable)
{
progressarray[uploadnow].value = ((evt.loaded / evt.total) * 100);
}
}
</script>
- 1
- 2
- 3
前往页