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 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
jQuery实现放大镜案例
Oct 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的一个基础知识 表单提交
2011/07/04 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
Node学习记录之cluster模块
2017/05/31 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
python网络编程学习笔记(一)
2014/06/09 Python
Python的动态重新封装的教程
2015/04/11 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
Python如何执行系统命令
2020/09/23 Python
快速创建python 虚拟环境
2020/11/28 Python
大型车展策划方案
2014/02/01 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
班长演讲稿范文
2014/04/24 职场文书
活动倡议书范文
2014/05/13 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
教师党员整改措施
2014/10/24 职场文书
2015年党建工作总结
2015/03/30 职场文书
Django使用channels + websocket打造在线聊天室
2021/05/20 Python
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python