当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jquery 实现拖动文件上传加载进度条功能

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

2018年03月29日  | 移动技术网IT编程  | 我要评论

通过对文件的拖动实现文件的上传，主要用到的是html5的ondrop事件，上传内容通道formdata传输：

//进度条
<div class="parent-dlg" >
 <div class="progress-label">0%</div>
 <div class="son"></div>
</div>
//要拖动到的地方
<div class="main_content_center"></div>

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;}

　此内容只是一个大概的文件上传技术方向，可根据自己的项目进行改进！　

总结

以上所述是小编给大家介绍的jquery 实现拖动文件上传加载进度条功能，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网