通過對文件的拖動實現(xiàn)文件的上傳，主要用到的是HTML5的ondrop事件，上傳內容通道FormData傳輸：
創(chuàng)新互聯(lián)是一家專業(yè)提供袁州企業(yè)網(wǎng)站建設,專注與網(wǎng)站建設、網(wǎng)站設計、H5建站、小程序制作等業(yè)務。10年已為袁州眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進行中。
//進度條//要拖動到的地方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; //已經(jīng)上傳大小情況
var tot = evt.total; //附件總大小
var per = Math.floor(100*loaded/tot); //已經(jīng)上傳的百分比
$(".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;} 此內容只是一個大概的文件上傳技術方向，可根據(jù)自己的項目進行改進！
總結
以上所述是小編給大家介紹的jquery 實現(xiàn)拖動文件上傳加載進度條功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
