使用者工具

網站工具


program:javascript:html5_uploadfile_drag_drop

差異處

這裏顯示兩個版本的差異處。

連向這個比對檢視

program:javascript:html5_uploadfile_drag_drop [2013/09/30 02:13] (目前版本)
行 1: 行 1:
 +目前測試:​\\
 +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>​
program/javascript/html5_uploadfile_drag_drop.txt · 上一次變更: 2013/09/30 02:13 (外部編輯)