MasterDragon

本頁是唯讀的，您可以看到原始碼，但不能更動它。您如果覺得它不應被鎖上，請詢問管理員。
目前測試:\\
Firefox, Chrome, Safari -- OK\\
Android, iOS -- 部分問題\\
IE -- Fail\\

<code javascript>
<!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>
</code>