program:javascript:html5_uploadfile_drag_drop
目前測試:
Firefox, Chrome, Safari – OK
Android, iOS – 部分問題
IE – Fail
<!DOCTYPE html>
<html>
<head>
<title>Upload Files using XMLHttpRequest - Minimal</title>
<style >
.file_items {
border-top:1px solid #CCC;
border-left:1px solid #CCC;
border-right:1px solid #CCC;
}
.progress_bar {
position:relative;
height:20px;
border-bottom:1px solid #CCC;
background-color: #EEE;
}
.progress_ui {
position:relative;
height:20px;
width:0%;
background-color:#DDD;
}
.progress_label {
position:absolute;
top:0px;
width:100%;
font-size:11px;
padding-top:3px;
padding-left:3px;
}
</style>
<script type="text/javascript">
var _FilePath = "/tmp/up";
var _FileArray = new Array();
var _FileIndex = -1;
// 初始化
function init(){
alert("window.File="+window.File); //可以用來存取硬碟中的檔案
alert("window.Blob="+window.Blob); //表示儲存在檔案中的原生資料
alert("window.FileList="+window.FileList); //File物件所成的集合
alert("window.FileReader="+window.FileReader); //用來讀取檔案
//設定可 Drag & Drop 的區域
var dropArea = document.getElementById("drop_area");
dropArea.addEventListener('dragover', handleDragOver, false); //拖拉物件經過
dropArea.addEventListener('dragleave', handleDragLeave, false); //拖拉物件離開
dropArea.addEventListener('drop', handleDropDown, false); //拖拉物件放下
}
//拖拉物件經過
function handleDragOver(evt){
evt.stopPropagation();
evt.preventDefault();
document.getElementById("drop_area").style.backgroundColor="#BBB";
}
//拖拉物件離開
function handleDragLeave(evt){
evt.stopPropagation();
evt.preventDefault();
document.getElementById("drop_area").style.backgroundColor="#EEE";
}
//拖拉物件放下
function handleDropDown(evt){
evt.stopPropagation();
evt.preventDefault();
files = evt.dataTransfer.files; //取得物件的檔案資訊
fileSelected(files); //將檔案加入列表
document.getElementById("drop_area").style.backgroundColor="#EEE";
}
/*
* 將檔案加入列表
* _File: 檔案物件列表
*/
function fileSelected(_Files) {
for(i=0;i<_Files.length;i++){
var file = _Files[i];
if (file) {
_FileArray.push(file); //將檔案加入 File Array
var index = _FileArray.length -1; //取得目前檔案的位置
// Size 格式化 四捨五入到小數第一位
var size2="";
if(file.size > (1024*1024*1024))
size2 = (file.size/(1024*1024*1024)).toFixed(1) +" GB";
else if(file.size > (1024*1024))
size2 = (file.size/(1024*1024)).toFixed(1)+ " MB";
else if(file.size > 1024)
size2 = (file.size/1024).toFixed(1) + " KB";
else
size2 = file.size + " B";
//建立視覺化的檔案列表
var file_items = document.getElementById("file_items");
var file_item = document.createElement("div");
file_item.setAttribute("id","file_item_" + index);
file_items.appendChild(file_item);
var file_item_content = "";
file_item_content += "";
file_item_content += "<div class='progress_bar'>";
file_item_content += "<div class='progress_ui'></div>";
file_item_content += "<span class='progress_label'>"+file.name+" - "+size2+"</span>";
file_item_content += "</div>";
file_item.innerHTML = file_item_content;
}
}
}
//上傳 FileArray 內的檔案
function uploadFiles(){
if(_FileIndex < _FileArray.length -1 ){
_FileIndex++;
upFile();
}
}
//開始上傳檔案
function upFile() {
var file = _FileArray[_FileIndex];
//設定表單內容
var fd = new FormData();
fd.append("filepath", _FilePath); //Server 的寫入位置(請參考uploadFile.cgi格式)
fd.append("filesize", file.size); //檔案大小(請參考uploadFile.cgi格式)
fd.append("file", file); //欲上傳的檔案
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false); //加入監聽 - Progress 改變
xhr.addEventListener("load", uploadComplete, false); //加入監聽 - 上傳完成
xhr.addEventListener("error", uploadFailed, false); //加入監聽 - 上傳失敗
xhr.addEventListener("abort", uploadCanceled, false); //加入監聽 - 上傳取消
xhr.open("POST", "/cgi-bin/uploadFile.cgi"); //非同步上傳
xhr.send(fd);
}
//上傳檔案 - Progress 改變
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
//document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
var _file_item = document.getElementById("file_item_"+_FileIndex);
var _progress_label = _file_item.getElementsByClassName("progress_label").item(0);
var _progress_bar = _file_item.getElementsByClassName("progress_bar").item(0);
var _progress_ui = _progress_bar.getElementsByClassName("progress_ui").item(0);
_progress_ui.style.width = percentComplete.toString() + '%';
//_progress_label.innerHTML = percentComplete.toString() + '%';
}
else {
//document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
}
//上傳檔案 - 上傳完成
function uploadComplete(evt) {
/* This event is raised when the server send back a response */
var _file_item = document.getElementById("file_item_"+_FileIndex);
var _progress_bar = _file_item.getElementsByClassName("progress_bar").item(0);
var _progress_ui = _progress_bar.getElementsByClassName("progress_ui").item(0);
_progress_ui.style.width = '100%';
//alert(evt.target.responseText);
setLabel("Finish")
uploadFiles();
}
//上傳檔案 - 上傳失敗
function uploadFailed(evt) {
//alert("There was an error attempting to upload the file.");
setLabel("Error");
uploadFiles();
}
//上傳檔案 - 上傳取消
function uploadCanceled(evt) {
//alert("The upload has been canceled by the user or the browser dropped the connection.");
setLabel("Calcle");
uploadFiles();
}
//使用隱藏的 Input-File 選擇檔案
function openFileMessage(){
//document.getElementById("FileSelect").style.display="block";
document.getElementById("FileSelect").click();
//document.getElementById("FileSelect").style.display="none";
}
//設定檔案列表的檔案資訊
function setLabel(str){
var _file_item = document.getElementById("file_item_"+_FileIndex);
var _progress_label = _file_item.getElementsByClassName("progress_label").item(0);
_progress_label.innerHTML += " - "+str;
}
</script>
</head>
<body onLoad="init();">
<div id="drop_area" style="width:450px; background-color:#EEE">
<label>Please select files or drag and drop files to here</label><br />
<input type="button" onClick="openFileMessage();" value="Select Files">
<input type="file" name="file" id="FileSelect" onchange="fileSelected(this.files);" multiple style="display:none"/>
<div id="file_items" class='file_items'></div>
<input type="button" onclick="uploadFiles()" value="Upload"/>
</div>
</body>
</html>
program/javascript/html5_uploadfile_drag_drop.txt · 上一次變更: 2019/11/16 08:12 由 127.0.0.1