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实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
使用jQuery实现购物车
Oct 29 jQuery
jQuery冲突问题解决方法
Jan 19 jQuery
jQuery实现穿梭框效果
Jan 19 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类中private属性继承问题分析
2012/11/01 PHP
php使用百度天气接口示例
2014/04/22 PHP
Java中final关键字详解
2015/08/10 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
简单的Python2.7编程初学经验总结
2015/04/01 Python
详解python之简单主机批量管理工具
2017/01/27 Python
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
windows下python安装pip图文教程
2018/05/25 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
宿舍卫生检讨书
2014/01/16 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
python Tkinter的简单入门教程
2021/04/11 Python
Tomcat用户管理的优化配置详解
2022/03/31 Servers