第jquery實現(xiàn)拖動文件上傳加載進(jìn)度條功能通過對文件的拖動實現(xiàn)文件的上傳，主要用到的是HTML5的ondrop事件，上傳內(nèi)容通道FormData傳輸：

//進(jìn)度條

div

div0%/div

div/div

/div

//要拖動到的地方

div/div

js:

vardz=$('#main_content_center');

dz.ondragover=function(ev){

//阻止瀏覽器默認(rèn)打開文件的操作

ev.preventDefault();

dz.ondrop=function(ev){

ev.preventDefault();

varfiles=ev.dataTransfer.files;

varlen=files.length,i=0;

while(ilen){

varfilesName=files[i].name;

varextStart=filesName.lastIndexOf(".");

varext=filesName.substring(extStart,filesName.length).toUpperCase();

if(ext!=".JPG"ext!=".PNG"ext!=".XML"){//判斷是否是需要的問件類型

TS.errorAlert("請選擇.jpg、.png、.xml類型的文件上傳！");

returnfalse;

}else{

test(files[i]);

i++;

$(".parent-dlg").show();

functiontest(a){

varformData=newFormData();

formData.append("name",);

formData.append("size",a.size);

formData.append("data",a);

$.ajax({

url:'',

type:'post',

data:formData,

cache:false,

processData:false,

contentType:false,

xhr:function(){

varxhr=$.ajaxSettings.xhr();

if(onprogressxhr.upload){

xhr.upload.addEventListener("progress",onprogress,false);

returnxhr;

functiononprogress(evt){

varloaded=evt.loaded;//已經(jīng)上傳大小情況

vartot=evt.total;//附件總大小

varper=Math.floor(100*loaded/tot);//已經(jīng)上傳的百分比

$(".progress-label").html(per+"%");

$(".son").css("width",per+"%");

if(per=100){

$(".parent-dlg").hide();

}

進(jìn)度條css:

.parent-dlg{position:absolute;width:400px;height:20px;border:1pxsolid#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:1px1px0#fff;}

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

此內(nèi)容只是一個大概的文件上傳