# javascript - file upload ## Introduction 利用 javascript 達到檔案上傳的功能
顯示上傳進度 多檔上傳 取消上傳 拖拉上傳 斷點續傳?? chrome 上傳資料夾 盡可能跨 browser(for IE8) 不依攋任一 javascript library 自幹上傳 iframe upload in IE ## Skill files API AJAX iframe FormData … ## Develop 單純用 javascript 利用 AJAX 上傳 處理 AJAX 上傳在 IE 的問題(利用 iframe 也許可解, Refer) 處理拖拉 處理拖拉資料夾 處理預設樣式 ## Issue FormData AJAX 上傳(IE10 以上) IE 利用 iframe 實作 ## Dseign flow ### Attribute inputFileNode(input type file element) fileName(name="") server(the file upload to server url) dropArea(set the drop area) ### Method upload cancel ### Event Use CustomEvent (IE 9 up) Refer - How to Create Custom Events in JavaScript
...
Category: File_upload
# file upload show progress bar If you want show upload progress, you must use AJAX method. And you upload files use FormData object. XMLHttpRequest object has upload properties XMLHttpRequest nsIXMLHttpRequestEventTarget
sample code
xmlHttpRequest.upload.onprogress = function (e) { console.log('onprogress', e); console.log(e.loaded); // progress console.log(Math.ceil((e.loaded/e.total) * 100) + '%'); }; Refer
...
# File upload using ajax Use FormData objects Using FormData Objects
FormData object only IE 10 up if IE use ajax upload, only use iframe method.
## sample HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>upload_AJAX</title> </head> <body> <form action="upload_one.php" method="post" enctype="multipart/form-data"> <label for="file">File:</label> <input type="file" name="Upfile" id="select"><br> <input type="submit"> </form> <a href="javascript:upload()">AJAX_upload</a> </body> </html> JavaScript
function upload () { // init FormData object var formData = new FormData(); // use append method append upload file formData.
...
## File Upload # Server side setting ## php.ini in Mac
/etc/php.ini file_uploads = On upload_max_filesize = 10M post_max_size = 10M file_uploads # 預設為on,允許用HTTP協定上傳 upload_tmp_dir # 上傳檔案暫存目錄,wamp5中,c:/wamp/tmp upload_max_filesize # 上傳檔案最大值 post_max_size # 利用 post 傳送數據所用最大值(利用 AJAX 或 post 上傳會有影響) max_execution_time # PHP執行時間最大值,預設為30秒 # style 由於預設的 <input type="file"> 樣式不好改，且每一個 broswer 預設的樣式都不一樣，所以都會希望用統一化的客制化樣式，但基本上不太可能把它的樣式改成所想要的客制化的樣式，除非直接用像 Bootstrap 之類的框架
## solution 1(hack) 把 <input type="file"> 的 style 設成 opacity: 0; 蓋在客制化的 button 上，也必須要設成跟客制化寬高一樣，以免覆蓋面積不一樣
CSS .btn, .file-select { width: 80px; height: 30px; } .
...
# fileUpload by yui library ## init upload button JavaScript bind click event in IE use JavaScript move CSS position
uploader : Upload file uploaderOut : handle not drag area ## event ### fileSelect select file & render upload list check file status handle fileList _upload
### uploadprogress upload file progress
### uploadcomplete upload complete check ok or fail _upload
### uploaderror cancel & upload next
### _upload check file status & upload status upload upload fileList[uploadfile]
...