关于js拖拽上传 [一个拖拽上传修改头像的流程]


Posted in Javascript onJuly 13, 2011

如今现代的浏览器已经有很多支持拖拽文件读取操作,其优点不再复述。前端时间利用拖拽改进了一下网站的头像上传流程,对其中的要点和实践体会做一点总结。

 先看一下总体视图:
关于js拖拽上传 [一个拖拽上传修改头像的流程]
1、 文件拖拽接受区域要有明显的标示,并且要尽可能的大(由于版面的原因,这个界面的拖放盒子并不大)。可以用虚线框盒子等样式吸引用户拖拽文件。最好有明显的文字提示和图标配合。

2、 在交互体验上当文件拖入浏览器窗口时,可以用拖放区变换背景颜色等向用户发起放置操作邀请。
实现代码:

doc.bind({ 
'dragenter':function(e){ 
$("#brsbox").addClass("dragbrowse"); 
dropbox.addClass("shine"); 
return false; 
}, 
'dragleave':function(e){ 
dropbox.removeClass("shine"); 
return false; 
}, 
'drop':function(e){ 
stopdft(e);} 
}); 
dropbox.bind({ 
'dragenter':function(e){ 
dropbox.addClass("candrop"); 
stopdft(e);}, 
'dragleave':function(e){ 
dropbox.removeClass("candrop"); 
stopdft(e);}, 
'dragover':function(e){ 
stopdft(e);}, 
'drop':function(e){ }

对于不支持拖拽的浏览器:

可惜的是 某些浏览器并不支持文件拖拽读取,这其中包括IE9等较现代的浏览器。所以我们必须为不支持拖拽的浏览器准备普通文件浏览上传作为备用方案。
当不支持拖拽文件读取时,界面如下:

 关于js拖拽上传 [一个拖拽上传修改头像的流程]

实现检测的代码如下:

it.detectDragable = function(){ 
filedrag = !!window.FileReader; 
if(!filedrag) return; 
$("#avtcnt").addClass('dragable');

文件放置时的处理:

 

 关于js拖拽上传 [一个拖拽上传修改头像的流程]

 文件放置到可接受区域时,请注意这时候无论你拖放在鼠标上的文件是单个还是多个,在浏览器和操作系统之间传送的e.dataTransefer.files总是复数。也就是多个文件。这也就意味着你需要循环处理鼠标上所携带的文件。
代码如下:

dropdom.addEventListener('drop',function(e){ 
it.handlefile(e.dataTransfer.files); 
stopdft(e);},false); }; 
it.handlefile = function(files){ 
var noimg = 0; 
for(var i=0; i<files.length; i++){ 
var file = files[i]; 
if(!file.type.match(/image*/)){ 
noimg ++; 
if(noimg ==files.length){ 
QSL.optTips('请选择jpg, png, gif 等格式的图片'); 
return false; 
} 
continue; 
} 
var reader = new FileReader(); 
reader.onload = function(e){ 
var img = document.createElement('img'); 
img.src = reader.result; 
setTimeout(function(){ 
it.imgSize = { 
w:img.width, 
h:img.height 
}; 
},500); 
dropdom.innerHTML=""; 
img.className ='localimg'; 
it.imgData = reader.result; 
dropdom.appendChild(img); 
imagedata.empty().val(reader.result); 
dropbox.addClass("droped"); 
clearner.show(); 
}; 
reader.readAsDataURL(file); 
}

处理拖拽到浏览器的文件

其中 stopdft(e) 是为了防止浏览器默认操作,不以浏览器打开文件。而转由脚本来处理拖放的文件。
这个流程中,我们需要的是图片文件,所以便利操作 e.dataTransfer.files 对象,查找类型为image的文件。
如果没有,则会提示。

读取文件的关键代码:
var reader = new FileReader();

reader.onload = function(e){
var img = document.createElement('img');
img.src = reader.result;
};
reader.readAsDataURL(file);
本例中我们需要读取图片的高度和宽度属性。所以我们做了如下操作
setTimeout(function(){
it.imgSize = {
w:img.width,
h:img.height
};
},500);
虽然是本地文件读取,但是仍然要延时来保证图片确实读取完毕。否则在某些浏览器中会取不到宽高的值。(可否有其他更简便方法?望指出)

删除现有图片,重置拖拽区域:
浏览读取完本地图片之后,要给用户提供删除和重置的选项。(如果是直接上传当然更简便)

it.resetDropbox = function(){ 
dropbox.attr("class","dropbox") 
.empty() 
.text("将文件拖拽至此区域"); 
imgData = ''; 
it.imgData = ''; 
it.imgSize = {w:0,h:0}; 
picsub.removeClass("uploading") 
.find("button").removeAttr("disabled") 
.text("上传"); 
imagedata.val(''); 
clearner.hide();

重置拖拽区域

到这里拖放读取文件的流程基本结束。
利用拖放,读取本地文件的其他优点:
普通的上传更改图片流程是:选择图片-上传图片-上传成功-服务器返回图片-客户端浏览效果
而如果利用拖放读取本地文件则可省去服务器返回 图片的步骤,直接利用reader.result返回的数据。
这样就节省了从服务器读取图片的延迟,并且节省了往返的数据流量。所以只需确认服务器端图片上传成功,图片预览调取本地数据即可:
代码:

function initImageCrop(url){ 
var t = document.getElementById("target"), 
p = document.getElementById("preview"), 
b = browseImage, 
s = [], 
ts = []; 
if(url=='data'){ 
t.src = b.imgData; 
p.src = b.imgData; 
posImage(b.imgSize.w,b.imgSize.h); 
}else{ 
var cutimg = new Image(); 
cutimg.onload = function(){ 
t.src = url; 
p.src = url; 
posImage(cutimg.width,cutimg.height); 
} 
cutimg.src = url;

图片上传成功后的处理

完整DEMO预览(静态文件暂时没有上传成功后的展示(:)
DEMO脚本

Javascript 相关文章推荐
可实现多表单提交的javascript函数
Aug 01 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 Javascript
javascript中方便增删改cookie的一个类
Oct 11 Javascript
js实现飞入星星特效代码
Oct 17 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
angular中不同的组件间传值与通信的方法
Nov 04 Javascript
JavaScript实现随机点名器实例详解
May 07 Javascript
react实现复选框全选和反选组件效果
Aug 25 Javascript
js实现限定范围拖拽的示例
Oct 26 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 #Javascript
JS模拟面向对象全解(二、类型与赋值)
Jul 13 #Javascript
JS模拟面向对象全解(一、类型及传递)
Jul 13 #Javascript
一些实用的jQuery代码片段收集
Jul 12 #Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 #Javascript
在IE浏览器中resize事件执行多次的解决方法
Jul 12 #Javascript
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 #Javascript
You might like
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
python实现中文转换url编码的方法
2016/06/14 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
python的json包位置及用法总结
2020/06/21 Python
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
大学活动邀请函
2014/01/28 职场文书
幼儿园保教管理制度
2014/02/03 职场文书
女生节标语
2014/06/26 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
财务审计整改报告
2014/11/06 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书
运动会通讯稿50字
2015/07/20 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android