HTML5+PHP拖拽文件上传

Drag&Drop : HTML5基于拖拽的事件机制.

File API :  可以很方便的让Web 应用访问文件对象，File API包括FileList、Blob、File、FileReader、URI scheme，本文主要讲解拖拽上传中用到的 FileList和FileReader接口。

FormData :FormData是基于 XMLHttpRequest Level 2的新接口，可以方便web 应用模拟Form 表单数据，最重要的是它支持文件的二进制流数据，这样我们就能够通过它来实现AJAX 向后端发送文件数据了。

HTML5 Drag & Drop 事件

过去我们想实现网页中的拖拽效果，基本上都是使用DOM事件模型中的mousedown、mousemove、mouseup的事件监听来模拟拖拽效果，为了实现实时的拖拽移动效果，还要不停地获取鼠标的坐标，还要不停的修改元素的位置，代码要堆很多，而且性能上也很不好(不停地修改元素位置会导致页面reflow，除非绝对定位)，现在有了html5原生的Drag & Drop 拖拽事件，真的是方便了许多，用”事半功倍”来形容绝不为过。

Drag & Drop 包括以下事件：

dragstart：  要被拖拽的元素开始拖拽时触发，这个事件对象是被拖拽元素

dragenter：  拖拽元素进入目标元素时触发，这个事件对象是目标元素

dragover：  拖拽某元素在目标元素上移动时触发，这个事件对象是目标元素

dragleave：  拖拽某元素离开目标元素时触发，这个事件对象是目标元素

dragend：  在drop之后触发，就是拖拽完毕时触发，这个事件对象是被拖拽元素

drop：  将被拖拽元素放在目标元素内时触发，这个事件对象是目标元素

完成一次成功页面元素拖拽的行为事件过程：dragstart –>dragenter –> dragover –> drop –> dragend

//要想实现拖拽，首页需要阻止浏览器默认行为，一共四个事件。

$(document).on({

  dragleave:function(e){ //拖离

e.preventDefault();

$('.dashboard_target_box').removeClass('over');

  },

  drop:function(e){ //拖后放

e.preventDefault();

  },

  dragenter:function(e){ //拖进

e.preventDefault();

$('.dashboard_target_box').addClass('over');

  },

  dragover:function(e){ //拖来拖去

e.preventDefault();

$('.dashboard_target_box').addClass('over');

  }

});

获取文件数据 HTML5 File API

File API 中的 FileList接口,它主要通过两个途径获取本地文件列表：

一种是 的表单形式，

一种是 e.dataTransfer.files拖拽事件传递的文件信息

var fileList = e.dataTransfer.files;

使用files 方法将会获取到拖拽文件的数组形势的数据，每个文件占用一个数组的索引，如果该索引不存在文件数据，将返回null值。可以通过length属性获取文件数量.

var fileNum = fileList.length;

文件类型

fileList[0].type.indexOf (’image’)

AJAX 上传图片(file.getAsBinary &FormData)

file.getAsBinary获取文件流很简单，但是要想上传数据，就要模拟一下表单的数据格式了，首先看看模拟表单的js代码, FormData模拟表单数据时更是简洁，不用麻烦的去拼字符串，而是直接将数据append 到 formdata对象中即可

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);

  

    
选择你的图片

      开始上传

    
拖动图片到

      这里