通过对文件的拖动实现文件的上传，主要用到的是HTML5的ondrop事件，上传内容通道FormData传输：
js:
文件的操作
ev.preventDefault();
}
dz.ondrop = function(ev) {
ev.preventDefault();
var files = ev.dataTransfer.files;
var len = files.length,i = 0;
while (i < len) {
var filesName=files[i].name;
var extStart=filesName.lastIndexOf(".");
var ext=filesName.substring(extStart,filesName.length).toUpperCase();
if(ext!=".JPG"&&ext!=".PNG"&&ext!=".XML"){ //判断是否是需要的问件类型
TS.errorAlert("请选择.jpg、.png、.xml类型的文件上传！");
return false;
}else{
test(files[i]);
}
i++;
}
$(".parent-dlg").show();
}
function test(a){
var formData = new FormData();
formData.append("name",a.name);
formData.append("size",a.size);
formData.append("data",a);
$.ajax({
url:'',type:'post',data:formData,cache: false,processData: false,contentType: false,xhr: function(){
var xhr = $.ajaxSettings.xhr();
if(onprogress && xhr.upload) {
xhr.upload.addEventListener("progress",onprogress,false);
return xhr;
}
}
})
};
function onprogress(evt){
var loaded = evt.loaded; //已经上传大小情况
var tot = evt.total; //附件总大小
var per = Math.floor(100*loaded/tot); //已经上传的百分比
$(".progress-label").html( per +"%" );
$(".son").css("width",per +"%");
if(per>=100){
$(".parent-dlg").hide();
}
}
进度条css:
此内容只是一个大概的文件上传技术方向，可根据自己的项目进行改进！
总结
以上所述是小编给大家介绍的jquery 实现拖动文件上传加载进度条功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
