標(biāo)簽： 前端卦停、交互
今天某產(chǎn)品經(jīng)理蹭蹭蹭跑過來說向胡，我們現(xiàn)在項(xiàng)目里對(duì)圖片、文件上傳的交互體驗(yàn)不太好惊完，可不可以實(shí)現(xiàn)拖拽上傳僵芹。
然而拖拽要用到HTML5的Drag和drop屬性，并不兼容非現(xiàn)代瀏覽器小槐。
各位前端的同學(xué)們都曾為了IE8兼容舍棄了很多交互上的體驗(yàn)淮捆，但是何不做個(gè)區(qū)分，讓使用現(xiàn)代瀏覽器的用戶感受到我們炫酷的產(chǎn)品體驗(yàn)?zāi)亍?/p>
接下來是實(shí)踐本股！
首先使用Web Worker判斷是否為支持HTML5的瀏覽器
if (typeof(Worker) !== "undefined") {
// 瀏覽器支持HTML5
} else {
// 瀏覽器不支持HTML5
}
頁面中放置一個(gè)拖拽區(qū)域area，preview用于預(yù)覽圖片信息桐腌。（目前只寫了個(gè)圖片上傳）
<div id="area">將圖片拖拽到此區(qū)域</div>
<div id="preview"></div>
阻止瀏覽器默認(rèn)的拖拽操作：
$(document).on({
dragleave:function(e){ //拖離
e.preventDefault();
},
drop:function(e){ //拖后放
e.preventDefault();
},
dragenter:function(e){ //拖進(jìn)
e.preventDefault();
},
dragover:function(e){ //拖來拖去
e.preventDefault();
}
});
上傳實(shí)現(xiàn)主體代碼拄显，主要用到文件API中的一個(gè)FileList接口，通過e.dataTransfer.files拖拽事件傳遞的文件信息案站，獲取本地文件列表信息躬审，通過length屬性獲取文件數(shù)量。如下：
var box = document.getElementById('area'); //拖拽區(qū)域
box.addEventListener("drop",
function(e) {
e.preventDefault(); //取消默認(rèn)瀏覽器拖拽效果
var fileList = e.dataTransfer.files; //獲取文件對(duì)象
//檢測(cè)是否是拖拽文件到頁面的操作
if (fileList.length == 0) {
return false;
}
//檢測(cè)文件是不是圖片
if (fileList[0].type.indexOf('image') === -1) {
alert("您拖的不是圖片蟆盐！");
return false;
}
//拖拉圖片到瀏覽器承边，可以實(shí)現(xiàn)預(yù)覽功能
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 + ")<p>圖片名稱：" + filename + "</p><p>大小：" + filesize + "KB</p>";
$("#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接收上傳的文件信息(用于測(cè)試)石挂，代碼如下：
<?php
$mypic = $_FILES["mypic"];
if(!empty($mypic)){
$picname = $_FILES['mypic']['name'];
$picsize = $_FILES['mypic']['size'];
if ($picsize > 512000) {
echo '圖片大小不能超過500k';
exit;
}
$type = strstr($picname, '.');
if ($type != ".gif" && $type != ".jpg") {
echo '圖片格式不對(duì)博助！';
exit;
}
$pics = 'hello' . $type;
//上傳路徑
$pic_path = "pics/". $pics;
move_uploaded_file($mypic["tmp_name"],$pic_path);
}
?>
<meta charset="utf-8">
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="mypic">
<input type="submit" value="上傳">
</form>
具體文件上傳方式待定，本文用于前端方法的實(shí)現(xiàn)說明痹愚，有利于現(xiàn)代瀏覽器用戶的交互體驗(yàn)富岳。
作者 @鄭小明
2016 年 08 月 17 日
