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

Posted oubao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery 实现拖动文件上传加进度条相关的知识,希望对你有一定的参考价值。

通过对文件的拖动实现文件的上传,主要用到的是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 实现拖动文件上传加进度条的主要内容,如果未能解决你的问题,请参考以下文章

jquery ajax实现上传文件代码,带进度条

jquery ajax实现上传文件代码,带进度条

使用 jQuery 的文件上传进度条

使用 jQuery 的文件上传进度条

java多文件上传显示进度条

Jquery实现可拖动进度条