php ajax 上传进度条,Ajax progress事件+php实现上传文件显示进度条

废话扯一扯

一直使用jQuery的ajax，对原生ajax也不了解，也没有做过ajax文件上传功能，最近把静态资源CDN换成了又拍云，想实现一下前端上传文件功能，奈何php不是很懂，看又拍云给的文档和demo，做上传进度显示，有不完美的地方，只能又把这个演示demo的文件放在博客的服务器上边，这个功能也是坑了我一下，先进入正题。

API

XMLHttpRequest.upload.progress:获取上传实时进度的事件，这是一个持续触发的事件，也是在这里被狠狠的坑了一把，

new FormData():使用方法先创建一个FormData对象，然后通过调用它的append()方法添加字段，key->value，

// 单文件上传方法

var data = new FormData();

data.append('file', document.querySelector('input[type="file"]').files[0]);

多文件上传方法：file控件添加multiple属性即可选中多个文件，下边为js处理

var aFiles = document.querySelector('#file');

for (var i = 0; i < aFiles.files.length; i++) {

data.append('file['+ i +']', aFiles.files[i]);

}

在控制台打印每个files对象可以获取到文件的一些基本信息，如下图所示：

完整demo源码

选择文件:

上传进度条，偷个懒，用progress标签来做：0% complete

实时上传信息：

var oProgress = document.querySelector('progress'),

oRes = document.querySelector('.res'),

oCurrent = document.querySelector('.current-pro'),

oFile = document.querySelector('#file');

var data = new FormData();

oFile.onchange = function() {

oProgress.value = '';

oCurrent.innerHTML = '实时上传信息：';

for (var i = 0; i < oFile.files.length; i++) {

if (oFile.files[i].size / 1024 > 1024) {

alert('请上传小于1024Kb的图片！');

} else

data.append('file['+ i +']', oFile.files[i]);

}

}

document.querySelector('input[type="button"]').onclick = function() {

if (oFile.value == '') {

alert('请选择文件！');

} else

ajax({

url: 'xm_upload.php',

type: 'POST',

dataType: 'json',

data: data,

progress(loaded, total) {

oProgress.value = loaded / total * 100;

oCurrent.innerHTML = '实时上传信息：' + (loaded / total * 100).toFixed(0) + '% ' + loaded + ' Byts; ' + total + ' Byts';

},

success(res) {

oFile.value = '';

res.forEach(function(curr) {

var oImg = new Image();

oImg.src = curr.path;

oRes.appendChild(oImg);

});

},

error(err) {

console.log(err);

}

});

}

header('Content-type:text/json');

date_default_timezone_set("PRC");

for($i = 0; $i < count($_FILES["file"]['name']); $i++){

// 上传文件大小

$fileSize = filesize($_FILES["file"]["tmp_name"][$i]);

// 截取后缀名

$fileEx = strtolower(substr(strrchr($_FILES["file"]["name"][$i], "."), 1));

// 生成随机文件名

$fileName = date("YmdHis") . substr(md5($_FILES["file"]["name"][$i]), 0, 6) . "." . $fileEx;

// 移动文件到指定目录

move_uploaded_file($_FILES["file"]["tmp_name"][$i], "upload/" . $fileName);

// 输出结果

$result[$i] = array(

"name" => urlencode($fileName),

"size" => ceil($fileSize / 1024) . "Kb",

"type" => urlencode($_FILES["file"]["type"][$i]),

"path" => urlencode("upload/" . $fileName),

"code" => 2

);

}

echo urldecode(json_encode($result));

?>

所有文章评论的贴图功能做了拖拽上传