XMLHttpRequest Level 2 輕鬆Ajax上傳

時間 2019-11-08

標籤 xmlhttprequest level 輕鬆 ajax 上傳欄目 Ajax 简体版

原文原文鏈接

XMLHttpRequest Level 2 輕鬆Ajax上傳：

記得在XMLHttpRequest Level 1時，實現ajax上傳，就用隱藏的iframe實現，並且功能也受限。

有關XMLHttpRequest Level 2官方參考：http://www.w3.org/TR/XMLHttpRequest2/#the-open-method

在XMLHttpRequest Level 2中，能夠輕鬆實現，下面以實例開始。

前端jsp頁面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>第二代XmlHttpRequest異步上傳</title>
		<script type="text/javascript">
			function upload(){
				if (!window.FormData){
					alert('您的瀏覽器不支持第二代XmlHttpRequest');
					return;
				}
				// HTML5 新增對象
				var formData = new FormData(document.getElementById('uploadForm'));
				//添加其餘表單域
				formData.append('user', 'haolin');
				formData.append('pass', '111111');
				
				var xhr = new XMLHttpRequest();
				xhr.open('POST', 'upload'); //請求url
				
				//上傳完成回調函數
				xhr.onload = function(event) {
					if (xhr.status === 200) {
						alert("上傳成功");
					} else {
						alert('出錯了');
					}
				};
				xhr.send(formData);
			}
		</script>
	</head>
	<body>
		<h1>第二代XmlHttpRequest對象實現異步上傳</h1>
		<form id="uploadForm" action="" method="post" enctype="multipart/form-data">
			<input id="upfile" type="file" name="upfile"/>
			<input type="button" value="上傳" onclick="upload()"/> 
		</form>
	</body>
</html>

後端部分代碼(基於apache commons upload):

PrintWriter out = new PrintWriter(response.getOutputStream());
FileItemFactory factory = new DiskFileItemFactory();// 爲該請求建立一個DiskFileItemFactory對象，經過它來解析請求。執行解析後，全部的表單項目都保存在一個List中。
ServletFileUpload upload = new ServletFileUpload(factory);
List<FileItem> items;
try {
    items = upload.parseRequest(request);
    Iterator<FileItem> itr = items.iterator();
    while (itr.hasNext()) {
	FileItem item = (FileItem) itr.next();
	System.out.println("是不是FormField: " + item.isFormField());
	System.out.println("接收到域: " + item.getFieldName());
	System.out.println("接收到值: " + item.getString("utf-8"));
	// 檢查當前項目是普通表單項目仍是上傳文件。
	if (item.isFormField()) {// 若是是普通表單項目，顯示錶單內容。
		String fieldName = item.getFieldName();
		out.println("the field name is " + fieldName);// 顯示錶單域名稱。
       } else {// 若是是上傳文件，顯示文件名。
		out.println("the upload file name is " + item.getName());
	} 
    }
    out.flush();
    out.close();
} catch (FileUploadException e) {
    e.printStackTrace();
}

對上述Ajax上傳進行了簡單的封裝：

var AjaxForm = function(cfg){
	if (!window.FormData){
		alert("Sorry, your browser doesn't supoort FormData!");
	}
	
	/**
	 * null or undefined 返回true, 不然false
	 */
	this.isNullOrUndefined = function(v, errMsg){
		if (!v){
			alert(errMsg);
			return true;
		}
		return false;
	};
	
	var cfg = cfg || {};
	if (this.isNullOrUndefined(cfg.id, "id can't be empty")) return;
	if (this.isNullOrUndefined(cfg.url, "url can't be empty")) return;
	
	this.id = cfg.id; // 表單id
	this.method = cfg.method || "POST"; //默認POST方法
	this.url = cfg.url;
	this.async = !cfg.sync; //同步否
	this.resultType = cfg.resultType || "text"; //返回結果類型 json對象或text
	this.formData = new FormData(document.getElementById(this.id)); //form數據
	this.xhr = new XMLHttpRequest(); //當前請求對象
	
	/**
	 * 超時事件
	 * 配置格式：
	 *   timeout : xxx,
	 *   onTimeout: function(event){}
	 */
	if (cfg.timeout){ 
		this.xhr.timeout = cfg.timeout;
		this.xhr.ontimeout = cfg.onTimeout;
	}
	
	/**
	 * 發送過程事件
	 * 配置格式: 
	 * onProgress: function(loaded, total){}
	 */
	if (cfg.onProgress){ //發送數據過程
		this.xhr.upload.onprogress = function(e){
			if (e.lengthComputable) {
				cfg.onProgress(e.loaded, e.total);
			}
		};
	}
	
	/**
	 * 上傳完成事件
	 */
	if (cfg.onComplete){
		this.xhr.onload = function(event){
			var res = event.target.responseText;
			if (this.resultType === 'json'){
				if ((typeof JSON) === 'undefine'){
					res = eval("("+res+")");
				} else{
					res = JSON.parse(res);
				}
			}
			cfg.onComplete(res);
		};
	}
	
	/**
	 * 發出請求
	 */
	this.request = function(){
		this.xhr.open(this.method, this.url, this.async);
		this.xhr.send(this.formData);
	};
};

調用實例：

var af = new AjaxForm({
	id: "uploadForm",
	url: 'upload',
	method: 'POST',
	timeout: 5000,
	onTimeout: function(event){
		alert('It is timeout.');
	},
	onProgress: function(loaded, total){
		var complete = (loaded / total * 100 | 0);
		var progress = document.getElementById('uploadProgress');
		progress.value = complete;
		progress.innerHTML = complete;
	},
	onComplete: function(result){
		alert(result);
	}
});
af.request();

不吝指正。 javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。