网页拖拽文件上传的实现

为什么80%的码农都做不了架构师？>>>   

拖动文件上传Drag & Drop 包括以下事件： dragstart： 要被拖拽的元素开始拖拽时触发，这个事件对象是被拖拽元素 dragenter： 拖拽元素进入目标元素时触发，这个事件对象是目标元素 dragover： 拖拽某元素在目标元素上移动时触发，这个事件对象是目标元素 dragleave： 拖拽某元素离开目标元素时触发，这个事件对象是目标元素 dragend： 在drop之后触发，就是拖拽完毕时触发，这个事件对象是被拖拽元素 drop： 将被拖拽元素放在目标元素内时触发，这个事件对象是目标元素 完成一次成功页面元素拖拽的行为事件过程： dragstart –> dragenter –> dragover –> drop –> dragend //要想实现拖拽，首页需要阻止浏览器默认行为，一共四个事件。 $(document).on({ dragenter:function(e){ //拖进 e.preventDefault(); $('.dashboard_target_box').addClass('over'); }, dragover:function(e){ //拖来拖去 e.preventDefault(); $('.dashboard_target_box').addClass('over'); } dragleave:function(e){ //拖离 e.preventDefault(); $('.dashboard_target_box').removeClass('over'); }, drop:function(e){ //拖后放 e.preventDefault(); }, }); 文件类型：fileList[0].type.indexOf (’image’) 文件列表：var fileList = e.dataTransfer.files; 文件数量：var fileNum = fileList.length; 异步javascript+XML上传图片(XMLHttpRequest) xhr = new XMLHttpRequest(); xhr.open("post", "test.php", true); xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); var fd = new FormData(); fd.append('ff', fileList[0]); xhr.send(fd);

转载于:https://my.oschina.net/lfxu/blog/477127