微客导航 » 文章资讯 » jquery 实现拖动文件上传加载进度条功能

jquery 实现拖动文件上传加载进度条功能

2023-09-15 07:39:05 189

通过对文件的拖动实现文件的上传，主要用到的是HTML5的ondrop事件，上传内容通道FormData传输：

//进度条

0%

//要拖动到的地方

js:

vardz=$('#main_content_center');
dz.ondragover=function(ev){
//阻止浏览器默认打开文件的操作
ev.preventDefault();
}
dz.ondrop=function(ev){
ev.preventDefault();
varfiles=ev.dataTransfer.files;
varlen=files.length,i=0;
while(i=100){
$(".parent-dlg").hide();
}
}

进度条css:

.parent-dlg{position:absolute;width:400px;height:20px;border:1pxsolid#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:1px1px0#fff;}
.parent-dlg.son{width:0;height:100%;background-color:#cccccc;text-align:center;line-height:20px;font-size:16px;font-weight:bold;}

此内容只是一个大概的文件上传技术方向，可根据自己的项目进行改进！

总结

以上所述是小编给大家介绍的jquery实现拖动文件上传加载进度条功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

返回顶部
3162201930
czq8825@qq.com

jquery 实现拖动文件上传加载进度条功能

热门推荐

随机推荐