一 、获取文件
var file=DOM对象.files[0]; //获取的第一个文件
二、判断文件大小
file.size > 52428800 //判断大小是否小于50M
三、上传文件(用FormData封装)
var data = new FormData();
data.append('myFiles', self.file);
LessonBeforeHandler.upResource(data, self, self.GetResOrigin);//调用上传接口
四、上传进度(H5原生进度条)
LessonBeforeHandler.upResource= function(data,listener,listenerFun) {
$.ajax({
url:上传地址,
data: data,
type: "post",
timeout: 300000,
cache: false,
processData: false,
contentType: false,
xhrFields: {
withCredentials: true
},
xhr: function(){
//获取ajaxSettings中的xhr对象,为它的upload属性绑定progress事件的处理函数
var myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ //检查upload属性是否存在
//绑定progress事件的回调函数
myXhr.upload.onprogress = progressFunction;
}
return myXhr; //xhr对象返回给jQuery使用
},
success: function (data) {
if (data.code == 0) {
listenerFun.call(listener,true,data.result);
} else {
listenerFun.call(listener, false, data.code, data.msg);
}
},
error: function (data) {
listenerFun.call(listener, false, data.status, data.statusText)
}
});
//progress事件的回调函数
function progressFunction(evt) {
var widthAll=$("#progress-all").width();
var progressBar = document.getElementById("progress-all");
var percentageDiv = document.getElementById("progress-now");
var percentageNum = document.getElementById("progress-num");
if (evt.lengthComputable) {
progressBar.max = evt.total;
progressBar.value = evt.loaded;
$(percentageDiv).css("width",Math.round(evt.loaded / evt.total *widthAll)+"px");
percentageNum.innerHTML = Math.ceil(evt.loaded / evt.total * 100) + "%";
if (evt.loaded == evt.total) {
console.log("上传完成100%");
}
}
}
};