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.執行結果