jquery는 파일 업로드 드래그 및 진행률 표시줄 로드 기능을 구현합니다.

이 기사에서는 주로 HTML5의 ondrop 이벤트를 사용하여 파일 업로드 및 로드 기능을 구현하기 위해 jquery를 소개합니다. 매우 훌륭하고 필요한 친구가 참조할 수 있습니다.

파일을 드래그하면 됩니다. 파일 업로드를 구현하기 위한 주요 용도는 HTML5 업로드 콘텐츠 채널 FormData 전송:

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

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:&#39;&#39;,
 type:&#39;post&#39;,
 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;}

위 내용은 제가 모두를 위해 편집한 것입니다. 앞으로 모든 사람에게 도움이 될 것입니다.

관련 기사:

vue 페이지 로딩 시 깜박이는 문제에 대한 해결 방법

js가 ModelAndView 값을 얻는 문제에 대한 간단한 토론

vue 렌더링 중 {{}} 깜박임 문제 및 해결 방법

위 내용은 jquery는 파일 업로드 드래그 및 진행률 표시줄 로드 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!