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实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jQuery编写QQ简易聊天框
Aug 27 jQuery
jQuery实现动态操作table行
Nov 23 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
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
PHP5+UTF8多文件上传类
2008/10/17 PHP
php面向对象全攻略 (二) 实例化对象 使用对象成员
2009/09/30 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
form自动提交实例讲解
2017/07/10 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
JS 控制小数位数的实现代码
2011/08/02 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
JS验证码实现代码
2017/09/14 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
Python 日志logging模块用法简单示例
2019/10/18 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
PIL.Image.open和cv2.imread的比较与相互转换的方法
2020/06/03 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
环境工程求职简历的自我评价范文
2013/10/24 职场文书
乡镇干部十八大感言
2014/02/17 职场文书
演讲稿开场白台词
2014/08/25 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
2014年学生工作总结
2014/11/20 职场文书