这篇文章主要介绍了jquery 实现拖动文件上传加载进度条功能,主要用到的是html5的ondrop事件，非常不错，具有参考借鉴价值，需要的朋友可以参考下
通过对文件的拖动实现文件的上传，主要用到的是HTML5的ondrop事件，上传内容通道FormData传输：
//进度条
0%
//要拖动到的地方
登录后复制
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 =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;}
登录后复制
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
vue页面加载闪烁问题的解决方法
浅谈js获取ModelAndView值的问题
vue渲染时闪烁{{}}的问题及解决方法
以上就是jquery 实现拖动文件上传加载进度条功能的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2754412.html
