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


Posted in jQuery onMarch 18, 2018

通过对文件的拖动实现文件的上传,主要用到的是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 相关文章推荐
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
jQuery中each方法的使用详解
Mar 18 #jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 #jQuery
JQuery选中select组件被选中的值方法
Mar 08 #jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 #jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 #jQuery
jQuery实现左右滑动的toggle方法
Mar 03 #jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 #jQuery
You might like
PHP_MySQL教程-第一天
2007/03/18 PHP
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
实例介绍PHP中zip_open()函数用法
2019/02/15 PHP
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
Python比较两个图片相似度的方法
2015/03/13 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
如何用JQuery进行表单验证
2013/05/29 面试题
程序员岗位职责
2013/11/11 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
汽车专业求职信
2014/06/05 职场文书
营业员岗位职责范本
2015/04/14 职场文书
学生会部长竞选稿
2015/11/19 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书
排查Tomcat进程假死的问题
2022/05/06 Servers
ant design charts 获取后端接口数据展示
2022/05/25 Javascript