shikailun的日志

HTML5拖拽上传文件

很早就在博客园看到过利用HTML5拖放上传文件功能的文章，一直没机会自己试一试，今天心血来潮也试了下，参考了4、5个网站，东拼西凑终于实现了，效果如下：http://yilee.info/media/html5-drag-drop-pic/upload.html

如何实现，一共四个步骤：

一浏览器检测

大致有两种方法

第一个是幸福收藏夹里讲的window.FileReader

if (window.FileReader) {
    alert('ok');
} else {
    alert('no');
}

还有一种是用jquery检测浏览器加版本

if($.browser.msie){ alert("Microsoft Internet Explorer");}
if($.browser.mozilla){ alert("Mozilla Firefox");}
if($.browser.msie){ alert($.browser.version);}

二监听拖拽

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

//拖离
dragleave: function(e) {
    e.preventDefault();
    $('.dashboard_target_box').removeClass('over');
},
//拖进
dragenter: function(e) {
    e.preventDefault();
    $('.dashboard_target_box').addClass('over');
},
//拖来拖去
dragover: function(e) {
    e.preventDefault();
    $('.dashboard_target_box').addClass('over');
},
var box = document.getElementById('target_box');
//丢。。。
box.addEventListener('drop',
    function(e) {
        e.preventDefault();
    }
);

一定要将dragover的默认事件取消掉，不然无法触发drop事件。

三得到文件列表

var fileList = e.dataTransfer.files;

四Ajax上传文件

可以按需求检测一下文件格式再上传

首先新建一个XHR请求

xhr = new XMLHttpRequest();
xhr.onreadystatechange = callback;
xhr.open("post", "test.php", true);
//异步请求
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
//上传完毕事件
xhr.addEventListener("load",
    function(e) {
        $('.dashboard_target_box').removeClass('over');
    },
false);
var fd = new FormData();
fd.append('file', fileList[i]);
xhr.send(fd);

上面绑定的事件是上传完毕

callback是回调函数

function callback() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert("服务端信息:" + xhr.responseText);
    }
}

readyState 有五种状态，4才代表上传完毕，具体可以参考readyState的五种状态详解

给个PHP简单的代码：

效果如下：

鼠标dropover事件：

上传完毕，服务器返回信息：