php 拖拽 上传文件 进度,jquery 实现拖动文件上传加载进度条功能

这篇文章主要介绍了jquery 实现拖动文件上传加载进度条功能,主要用到的是HTML5的ondrop事件，非常不错，具有参考借鉴价值，需要的朋友可以参考下

通过对文件的拖动实现文件的上传，主要用到的是HTML5的ondrop事件，上传内容通道FormData传输：//进度条

0%

//要拖动到的地方

js:var dz = $('#main_content_center');

dz.ondragover = function(ev) {

//阻止浏览器默认打开文件的操作

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:.parent-dlg{position: absolute;width:400px; height:20px; border:1px solid #aaaaaa;border-radius:3px;top:30%;left:50%;z-index:9999;margin-left:-200px;display:none;}

.parent-dlg .progress-label{position: absolute;left: 50%;top: 4px;font-weight: bold;text-shadow: 1px 1px 0 #fff;}

.parent-dlg .son {width:0; height:100%; background-color:#cccccc; text-align:center; line-height:20px; font-size:16px; font-weight:bold;}

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：