HTML5之文件拖拽上传

标签： 前端、交互

---

今天某产品经理蹭蹭蹭跑过来说，我们现在项目里对图片、文件上传的交互体验不太好，可不可以实现拖拽上传。
然而拖拽要用到HTML5的Drag和drop属性，并不兼容非现代浏览器。

---

各位前端的同学们都曾为了IE8兼容舍弃了很多交互上的体验，但是何不做个区分，让使用现代浏览器的用户感受到我们炫酷的产品体验呢。

接下来是实践！

---

首先使用Web Worker判断是否为支持HTML5的浏览器

if (typeof(Worker) !== "undefined") {
    // 浏览器支持HTML5
} else {
    // 浏览器不支持HTML5
}

页面中放置一个拖拽区域area，preview用于预览图片信息。（目前只写了个图片上传）

将图片拖拽到此区域
 
 

阻止浏览器默认的拖拽操作：

$(document).on({
    dragleave:function(e){      //拖离
        e.preventDefault();
    },
    drop:function(e){           //拖后放
        e.preventDefault();
    },
    dragenter:function(e){      //拖进
        e.preventDefault();
    },
    dragover:function(e){       //拖来拖去
        e.preventDefault();
    }
    });

上传实现主体代码，主要用到文件API中的一个FileList接口，通过e.dataTransfer.files拖拽事件传递的文件信息，获取本地文件列表信息，通过length属性获取文件数量。如下：

var box = document.getElementById('area'); //拖拽区域
box.addEventListener("drop",
function(e) {
    e.preventDefault(); //取消默认浏览器拖拽效果
    var fileList = e.dataTransfer.files; //获取文件对象
    //检测是否是拖拽文件到页面的操作
    if (fileList.length == 0) {
        return false;
    }
    //检测文件是不是图片
    if (fileList[0].type.indexOf('image') === -1) {
        alert("您拖的不是图片！");
        return false;
    }
    //拖拉图片到浏览器，可以实现预览功能
    var img = window.webkitURL.createObjectURL(fileList[0]);
    var filename = fileList[0].name; //图片名称
    var filesize = Math.floor((fileList[0].size) / 1024);
    if (filesize > 500) {
        alert("上传大小不能超过500K.");
        return false;
    }
    //alert(filesize);
    var str = "![](" + img + ")
图片名称：" + filename + "
大小：" + filesize + "KB
";
    $("#preview").html(str);

    //上传
    xhr = new XMLHttpRequest();
    xhr.open("post", "upload.php", true);
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

    var fd = new FormData();
    fd.append('mypic', fileList[0]);

    xhr.send(fd);

},
false);

后端PHP接收上传的文件信息(用于测试)，代码如下：

 512000) {
        echo '图片大小不能超过500k';
        exit;
    }
    $type = strstr($picname, '.');
    if ($type != ".gif" && $type != ".jpg") {
        echo '图片格式不对！';
        exit;
    }
    $pics = 'hello' . $type;
    //上传路径
    $pic_path = "pics/". $pics;
    move_uploaded_file($mypic["tmp_name"],$pic_path);
}
?>

具体文件上传方式待定，本文用于前端方法的实现说明，有利于现代浏览器用户的交互体验。

---

作者 @郑小明

2016 年 08 月 17 日