jquery 实现拖动文件上传加载进度条功能
程序员文章站
2022-07-09 18:04:42
通过对文件的拖动实现文件的上传,主要用到的是html5的ondrop事件,上传内容通道formdata传输:
//进度条
通过对文件的拖动实现文件的上传,主要用到的是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 实现拖动文件上传加载进度条功能,希望对大家有所帮助
上一篇: ssr 之Nuxt.js
下一篇: 万事达做"万物支付" 戒指能买单?