HTML5实现多文件多图上传实例

function getimgmany($rr,$upload_image_dir)
{
$fs = $_FILES[$rr];
$imgnames = array();

for($i=0;$i {
//得到扩展名

$pathinfo = pathinfo($_FILES[$rr]['name'][$i]);

if($fs['size']==0)continue;

//检查文件扩展名，看是否是支持的图片格式
$fileextname = "jpg|gif|png|jpeg|bmp";
if($type=="file")
{
$fileextname.="|txt|sql|html|htm|pdf|chm|rar|zip|doc|xls";
}
echo $pathinfo["extension"];
if( !preg_match("/^".$fileextname."$/i", $pathinfo["extension"]) )
{
echo "

$imgdir = "uploads/";
$imgs = getimgmany('files',$imgdir);
print_r($imgs);

li{list-style:none}

li img{width:100px}

.tips{color:red}

注意图片太小的话，看不到进度条

读取进度：

//定义获取对象的方法

function $(id) {

return document.getElementById(id);

}

var filesInput = $("filesInput"),

info = $("info"),

imageBox = $("imageBox"),

btnUpload = $("btnUpload"),

progress = $("Progress"),

percent = $("percent"),

uploadSpeed = $("uploadSpeed");

//定义存放图片对象的数组

var uploadImgArr = [];

//防止图片上传完成后，再点击上传按钮的时候重复上传图片

var isUpload = false;

//定义获取图片信息的函数

function getFiles(e) {

isUpload = false;

e = e || window.event;

//获取file input中的图片信息列表

var files = e.target.files,

//验证是否是图片文件的正则

reg = /image/.*/i;

//console.log(files);

for (var i = 0,f; f = files[i]; i++) {

//把这个if判断去掉后，也能上传别的文件

if (!reg.test(f.type)) {

imageBox.innerHTML += "

//跳出循环

continue;

}

//console.log(f);

uploadImgArr.push(f);

var reader = new FileReader();

reader.onload = (function(file) {

//获取图片相关的信息

var fileSize = (file.size / 1024).toFixed(2) + "K",

fileName = file.name,

fileType = file.type;

//console.log(fileName)

return function(e) {

//console.log(e.target)

//获取图片的宽高

var img = new Image();

img.addEventListener("load", imgLoaded, false);

img.src = e.target.result;

function imgLoaded() {

imgWidth = img.width;

imgHeight = img.height;

//图片加载完成后才能获取imgWidth和imgHeight

imageBox.innerHTML += "

图片名称是：" + fileName + ";图片的的大小是：" + fileSize + ";图片的类型是：" + fileType + ";图片的尺寸是：" + imgWidth + " X " + imgHeight + "

}

}

})(f);

//读取文件内容

reader.readAsDataURL(f);

}

//console.log(uploadImgArr);

}

if (window.File && window.FileList && window.FileReader && window.Blob) {

filesInput.addEventListener("change", getFiles, false);

} else {

info.innerHTML = "您的浏览器不支持HTML5长传";

info.className="tips";

}
//开始上传照片

function uploadFun() {

var j = 0;

function fun() {

if (uploadImgArr.length > 0 && !isUpload) {

var singleImg = uploadImgArr[j];

var xhr = new XMLHttpRequest();

if (xhr.upload) {

//进度条(见http://www.c*ss1*1*9.com/archives/1476)

xhr.upload.addEventListener("progress",

function(e) {

if (e.lengthComputable) {

progress.value = (e.loaded / e.total) * 100;

percent.innerHTML = Math.round(e.loaded * 100 / e.total) + "%";

//计算网速

var nowDate = new Date().getTime();

var x = (e.loaded) / 1024;

var y = (nowDate - startDate) / 1000;

uploadSpeed.innerHTML = "网速：" +(x / y).toFixed(2) + " K/S";

} else {

percent.innerHTML = "无法计算文件大小";

}

},

false);

// 文件上传成功或是失败

xhr.onreadystatechange = function(e) {

if (xhr.readyState == 4) {

if (xhr.status == 200 && eval("(" + xhr.responseText + ")").status == true) {

info.innerHTML += singleImg.name + "上传完成; ";

//因为progress事件是按一定时间段返回数据的，所以单独progress不可能100%的，在这设置传完后强制设置100%

progress.value = 100;

percent.innerHTML = "100%";

isUpload = true;

} else {

info.innerHTML += singleImg.name + "上传失败; ";

}

//上传成功（或者失败）一张后，再次调用fun函数，模拟循环

if (j

j++;

isUpload = false;

fun();

}

}

};

var formdata = new FormData();

formdata.append("FileData", singleImg);

// 开始上传

xhr.open("POST", "upload.php", true);

xhr.send(formdata);

var startDate = new Date().getTime();

}

}

}

fun();

}

btnUpload.addEventListener("click", uploadFun, false);