文章來源：XYZ的筆記本
HTML5 拖曳多檔案上傳
目的：拖曳電腦檔案到網頁某區塊後，直接上傳到網站伺服器上。
方法：
- 使用 HTML5 新增的拖曳功能(Drag and Drop)，將電腦檔案拖曳到網頁上。
- 拖曳時會產生幾種事件，這些事件會產生 DragEvent 物件。
- DragEvent 物件有一個 dataTransfer 屬性，由dataTransfer 屬性，可取得 DataTransfer 物件。
- 由 DataTransfer 物件的 files 屬性，即可取得檔案物件(FileList)。
- 將取得的檔案物件丟給 FormData 物件。
範例：以下範例可拖曳多個 JPG 圖檔，一次上傳，並顯示上傳進度。
- 最後將 FormData 的資料，丟給 XMLHttpRequest 使用 AJAX 方式上傳到網站伺服器。
(於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 意見:
張貼留言