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使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
jQuery实现朋友圈查看图片
Sep 11 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
给多个地址发邮件的类
2006/10/09 PHP
PHP的面试题集
2006/11/19 PHP
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
2011/01/23 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
JS交换变量的方法
2015/01/21 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
jquery实现可关闭的倒计时广告特效代码
2015/09/02 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
nodeJS微信分享
2017/12/20 NodeJs
vue项目实现github在线预览功能
2018/06/20 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
Python中对列表排序实例
2015/01/04 Python
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
药品促销活动方案
2014/02/14 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
车间主任岗位职责
2014/03/16 职场文书
市场营销毕业求职信
2014/08/07 职场文书
辞职信标准格式
2015/02/27 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
学习心得体会
2019/06/20 职场文书
创业计划书之家教中心
2019/09/25 职场文书
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers