关于js拖拽上传【一个通过拖拽上传修改头像的过程】

现在很多浏览器都支持拖放式的文件读取操作，其优点不再赘述。前端采用拖拽的方式完善网站头像上传流程，并总结要点和实践经验。我们来看看整体的看法：。

1.文件拖放接收区域要标注清楚，尽量大(由于布局原因，这个界面的拖放框不大)。您可以吸引用户以虚线框等样式拖放文件。最好有明显的文字提示和图标。2.当文件在交互体验中被拖入浏览器窗口时，可以使用拖放区改变背景颜色等。向用户发起放置操作的邀请。实现代码：复制代码如下： doc . bind({ ' drag enter ' : function(e){ $(' # BRS box ')。add class(' drag browse ')；Dropbox . AddClass(' shine ')；返回false}，' drag leave ' : function(e){ Dropbox . remove class(' shine ')；返回false}，“drop”: function(e){ stop DFT(e)；} });Dropbox . bind({ ' drag enter ' : function(e){ Dropbox . addCLaSS(' candrop ')；stop DFT(e)；}、“drag leave”: function(e){ Dropbox . remove class(' candrop ')；stop DFT(e)；}、“drag over”: function(e){ stop DFT(e)；}，' drop':function(e){}对于不支持拖放的浏览器：遗憾的是，有些浏览器不支持文件拖放读取，包括IE9等更现代的浏览器。因此，我们必须为不支持拖放的浏览器准备普通的文件浏览和上传作为备份计划。不支持拖放文件读取时，界面如下：。

实现代码如下：复制代码如下： I . detectdraggable=function(){ file drag=！窗户。FileReaderif(！filedrag)返回；$('#avtcnt ')。addClass('可拖动')；放置文件时的处理：

当文件被放置在可接受的区域时，请注意，无论您在鼠标上拖放的文件是单个还是多个，浏览器和操作系统之间传输的the e.dataTransefer.files总是多个。也就是多个文件。这意味着你需要在鼠标携带的文件中循环。代码如下：复制代码如下： drop DOM . addevent listener(' drop ')，函数(e){ it . handlefile(e . data transfer . files)；stop DFT(e)；}，false)；};it . handlefile=function(files){ var no img=0；for(var I=0；ifiles.lengthI){ var file=files[I]；if(！file . type . match(/image */){ no img；if(no img==files . length){ qsl . opt tips('请选择jpg、png、gif等格式的图片。);返回false}继续；} var reader=new FileReader()；reader . onload=function(e){ var img=document . create element(' img ')；img . src=reader . result；setTimeout(function(){ it . imgsize={ w : img . width，h : img . height }；},500);dropdom.innerHTML=img . class name=' local img '；it . IMgdata=reader . result；drop DOM . appendchild(img)；imagedata.empty()。val(reader . result)；drop box . AddClass(' drop ed ')；clearner . show()；};reader.readAsDataURL(文件)；}处理拖到浏览器的文件，其中stopdft(e)是为了防止浏览器默认运行，以免在浏览器中打开文件。相反，脚本处理拖放的文件。在这个过程中，我们需要的是一个图片文件，所以操作e.dataTransfer.files对象和查找image类型的文件都很方便。如果没有，系统会提示您。读取文件的关键代码：var reader=new file reader()；reader . onload=function(e){ var img=document . create element(' img ')；img . src=reader . result；};reader.readAsDataURL(文件)；在这个例子中，我们需要读取图片的高度和宽度属性。因此，我们做了以下操作：settimeout(function(){ it . img size={ w : img . width，h : img . height }；},500);虽然是本地文件读取，但仍然需要延迟，以确保图片被实际读取。否则，在某些浏览器中，将不会获得宽度和高度的值。(还有其他简单的方法吗？指出)删除已有图片并重置拖动区域：在浏览和阅读本地图片后，应为用户提供删除和重置选项。(如果是直接上传，当然更容易。)复制代码如下：IT。RESET Dropbox=function(){ Dropbox。attr ('class '，' Dropbox ')。空()。文本(“将文件拖放到此区域”)；imgData=it.imgData=it.imgSize={w:0，h :0 }；Pic接头。removeclass('上传')。查找('按钮')。removeattr ('disabled ')。文本('上传')；imagedata . val(“”)；clearner . hide()；在这里重置拖拽区，拖拽读取文件的过程基本结束。使用拖放读取本地文件的其他优点：上传和更改图片的常见过程是：选择图片-上传图片-上传成功-服务器返回图片-客户端的浏览效果。如果使用拖放读取本地文件，可以省略服务器返回图片的步骤，直接使用reader.result返回的数据。这样节省了从服务器读取图片的延迟，也节省了往返数据流。所以只需要确认服务器上传的图像是成功的，就可以从图像预览中检索到本地数据：代码：copy代码如下：函数initial image crop(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 cut mg=new Image()；cuti mg . onload=function(){ t . src=URL；p.src=urlposImage(角质.宽度，角质.高度)；} cuti mg . src=URL；图片上传成功后完成DEMO预览(静态文件暂时没有上传成功后的DEMO脚本(:)。