HTML5应用之文件拖拽上传

AG集团官方网站

2018-10-26

  HTML  我们在页面中放置一个拖拽区域#drop_area,即接收拖拽的区域,#preview用来预览拖拽上传的图片信息。 divid=drop_area将图片拖拽到此区域/divdivid=preview/div  Javascript  要想实现拖拽,页面需要阻止浏览器默认行为,即四个事件(拖离、拖后放、拖进、拖来拖去),因为我们要阻止浏览器默认将图片打开的行为,这里我们使用jQuery来完成。 $(function(){//阻止浏览器默认行。

$(document).on({dragleave:function(e){//拖离();},drop:function(e){//拖后放();},dragenter:function(e){//拖进();},dragover:function(e){//拖来拖去();}});...});  最后总结下HTML5实现拖拽上传的技术要点:  1、监听拖拽:监听页面元素的拖拽事件,包括:dragenter、dragover、dragleave和drop,一定要将dragover的默认事件取消掉,不然无法触发drop事件。

如需拖拽页面里的元素,需要给其添加属性draggable=”true”;  2、获取拖拽文件:在drop事件触发后通过获取拖拽文件列表,.length属性获取文件数量,.type属性获取文件类型。

  3、读取图片数据并添加预览图。   4、发送图片数据:使用FormData模拟表单数据AJAX提交文件流。