自由學習的風

幽夢影 張潮 少年讀書,如隙中窺月;中年讀書,如庭中望月;老年讀書,如臺上玩月。皆以閱歷之淺深,為所得之淺深耳。

[轉] HTML5 拖曳多檔案上傳

2014年6月4日 星期三

文章來源:XYZ的筆記本

HTML5 拖曳多檔案上傳
目的:拖曳電腦檔案到網頁某區塊後,直接上傳到網站伺服器上。
方法:
  1. 使用 HTML5 新增的拖曳功能(Drag and Drop),將電腦檔案拖曳到網頁上。 
  1. 拖曳時會產生幾種事件,這些事件會產生 DragEvent 物件
  1. DragEvent 物件有一個 dataTransfer 屬性,由dataTransfer 屬性,可取得 DataTransfer 物件
  1. 由 DataTransfer 物件的 files 屬性,即可取得檔案物件(FileList)。 
  1. 將取得的檔案物件丟給 FormData 物件。
  1. FormData:http://www.w3.org/TR/XMLHttpRequest2/#interface-formdata
  1. 最後將 FormData 的資料,丟給 XMLHttpRequest 使用 AJAX 方式上傳到網站伺服器。
範例:以下範例可拖曳多個 JPG 圖檔,一次上傳,並顯示上傳進度。
(於Firefox、Chrome、IE10 測試可正常運作)
HTML 與 JavaScript 的部份如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5拖曳多檔案上傳</title>
<style>
#dropDIV{
text-align: center;
width: 300px;
height: 200px;
margin: auto;
border: dashed 2px gray;
}
img{
max-height:200px;
max-width:300px;
}
</style>
<script>
function dragoverHandler(evt) {
evt.preventDefault();
}
function dropHandler(evt) {//evt 為 DragEvent 物件
evt.preventDefault();
var files = evt.dataTransfer.files;//由DataTransfer物件的files屬性取得檔案物件
var fd = new FormData();
var xhr = new XMLHttpRequest();
var up_progress = document.getElementById('up_progress');
xhr.open('POST', 'upload.php');//上傳到upload.php
xhr.onload = function() {
//上傳完成
up_progress.innerHTML = '100 %, 上傳完成';
};
xhr.upload.onprogress = function (evt) {
//上傳進度
if (evt.lengthComputable) {
var complete = (evt.loaded / evt.total * 100 | 0);
if(100==complete){
complete=99.9;
}
up_progress.innerHTML = complete + ' %';
}
}
for (var i in files) {
if (files[i].type == 'image/jpeg') {
//將圖片在頁面預覽
var fr = new FileReader();
fr.onload = openfile;
fr.readAsDataURL(files[i]);
//新增上傳檔案,上傳後名稱為 ff 的陣列
fd.append('ff[]', files[i]);
}
}
xhr.send(fd);//開始上傳
}
function openfile(evt) {
var img = evt.target.result;
var imgx = document.createElement('img');
imgx.style.margin = "10px";
imgx.src = img;
document.getElementById('imgDIV').appendChild(imgx);
}
</script>
</head>
<body>
<div id="dropDIV" ondragover="dragoverHandler(event)" ondrop="dropHandler(event)">
拖曳圖片到此處上傳
<div id="up_progress"></div>
</div>
<div id="imgDIV"></div>
</body>
</html>
伺服器端處理上傳圖檔的 PHP 程式(upload.php)
$uploads_dir = 'mydir';//存放上傳檔案資料夾
foreach ($_FILES["ff"]["error"] as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
$tmp_name = $_FILES["ff"]["tmp_name"][$key];
$name = $_FILES["ff"]["name"][$key];
move_uploaded_file($tmp_name, "$uploads_dir/$name");
}
}

0 意見:

張貼留言