js 檔案上傳外掛(支援上傳進度資訊)
阿新 • • 發佈:2019-02-13
1.原始碼如下
/** * @author 描述:version 1.0版本 */ function XUploader() { /** * 對應input物件 */ var fileInput; /** * 全域性回撥函式,外部傳入 */ var onUploading, onSuccess, onFailed, onCanceled; /** * FormData物件,儲存將上傳的檔案跟附帶資訊,附帶資訊以鍵值對形式存放 */ var formData = new FormData(); /** * 核心上傳類 */ var xhr = new XMLHttpRequest(); /** * 初始化檔案上傳物件 emId為input [type = file]的Id */ this.bindFiles = function(emId) { fileInput = document.getElementById(emId); fileInput.onchange = function() { var files = fileInput.files; var fileInfo = {}; if (files) { var fileSize = 0; for ( var i in files) { fileSize += files[i].size; } if (fileSize > 1024 * 1024 * 1024) { fileSize = (Math.round(fileSize * 100 / (1024 * 1024 * 1024)) / 100) .toString() + 'G'; } else if (fileSize > 1024 * 1024 && fileSize < 1024 * 1024 * 1024) { fileSize = (Math.round(fileSize * 100 / (1024 * 1024)) / 100) .toString() + 'M'; } else if (fileSize > 1024 && fileSize < 1024 * 1024){ fileSize = (Math.round(fileSize * 100 / 1024) / 100) .toString() + 'K'; } else { fileSize = (Math.round(fileSize)) .toString() + 'B'; } } else { } }; } /** * 上傳檔案 */ this.upload = function(url) { var name = fileInput.getAttribute("name"); var fileLists = fileInput.files; if (fileLists) { for ( var i in fileLists) { formData.append(name, fileLists[i]); } } xhr.upload.addEventListener("progress", this.onProgress, false); xhr.addEventListener("load", this.onComplete, false); xhr.addEventListener("error", this.onFailed, false); xhr.addEventListener("abort", this.onCanceled, false); xhr.open("POST", url);// 修改成自己的介面 xhr.send(formData); } /** * 取消上傳 */ this.cancel = function() { xhr.abort(); } /** * 檔案上傳中 */ this.onProgress = function(evt) { if (evt.lengthComputable) { var percentComplete = Math.ceil(evt.loaded * 100 / evt.total) + '%'; var resp = { loader : evt.loaded, total : evt.total, percent : percentComplete }; if (onUploading) { onUploading(resp); } } else { if (onUploading) { onUploading('unable to compute'); } } } /** * 檔案上傳完畢 */ this.onComplete = function(evt) { if (onSuccess) { onSuccess(evt.target.responseText); } console.log("onSuccess"); } /** * 檔案上傳失敗 */ this.onFailed = function(evt) { if (onFailed) { onFailed("failed"); } console.log("onFailed"); } /** * 檔案取消上傳 */ this.onCanceled = function(evt) { if (onCanceled) { onCanceled("canceled"); } console.log("onCanceled"); } /** * 設定上傳時附帶的鍵值對資訊 */ this.setParams = function(mapData){ if (mapData && mapData instanceof HashMap) { var keyArray = mapData.keySet(); for(var i = 0; i < mapData.size(); i++) { var k = keyArray[i]; formData.append(k,mapData.get(k)); } } else { alert("引數資料型別錯誤,必須為HashMap物件"); } } /** * 設定上傳過程回撥監聽 */ this.setOnUploadingListener = function(callback) { onUploading = callback; } /** * 設定上傳成功回撥監聽 */ this.setOnSuccessListener = function(callback) { onSuccess = callback; } /** * 設定上傳失敗回撥監聽 */ this.setOnFailedListener = function(callback) { onFailed = callback; } /** * 設定取消上傳回調監聽 */ this.setOnCanceledListener = function(callback) { onCanceled = callback; } } /** * 定義鍵值對 */ function HashMap() { // 定義長度 var length = 0; // 建立一個物件 var obj = new Object(); /** * 判斷Map是否為空 */ this.isEmpty = function() { return length == 0; }; /** * 判斷物件中是否包含給定Key */ this.containsKey = function(key) { return(key in obj); }; /** * 判斷物件中是否包含給定的Value */ this.containsValue = function(value) { for(var key in obj) { if(obj[key] == value) { return true; } } return false; }; /** * 向map中新增資料 */ this.put = function(key, value) { if(!this.containsKey(key)) { length++; } obj[key] = value; }; /** * 根據給定的Key獲得Value */ this.get = function(key) { return this.containsKey(key) ? obj[key] : null; }; /** * 根據給定的Key刪除一個值 */ this.remove = function(key) { if(this.containsKey(key) && (delete obj[key])) { length--; } }; /** * 獲得Map中的所有Value */ this.values = function() { var _values = new Array(); for(var key in obj) { _values.push(obj[key]); } return _values; }; /** * 獲得Map中的所有Key */ this.keySet = function() { var _keys = new Array(); for(var key in obj) { _keys.push(key); } return _keys; }; /** * 獲得Map的長度 */ this.size = function() { return length; }; /** * 清空Map */ this.clear = function() { length = 0; obj = new Object(); }; /** * 將hashMap轉換成json */ this.toString = function() { var s = "["; var keyArray = this.keySet(); for(var i = 0; i < length; i++, s += ',') { var k = keyArray[i]; s += "{'" + k + "':" + obj[k] + "}"; } s = s.substring(0, s.length - 1); if(s != "") { s += "]"; } return s; } }
2.使用方法
1.引入XUploader.js
2.頁面中定義input控制元件
<input type="file" name="files" id="fileUploader" multiple/>
<input type="button" onclick="uploadFile()" value="Upload" />
3.js程式碼
//上傳進度回撥函式 function getUploadingInfo(resp){ console.log(resp); } //建立檔案上傳物件 var uploader = new XUploader(); //通過input框id初始化 uploader.bindFiles("fileUploader"); //設定上傳進度回撥函式 uploader.setOnUploadingListener(getUploadingInfo); //上傳 function uploadFile() { //除檔案之外的鍵值對附帶資訊 var params = new HashMap(); params.put("test","123"); params.put("test2","1232"); //設定上傳引數 uploader.setParams(params); //上傳檔案跟附帶引數資訊,引數為自己介面 uploader.upload('uploadCommonSoftware'); }
3.執行結果