HTML5 jQuery+FormData 異步上傳文件，帶進度條

時間 2019-12-01

標籤 html5 html jquery+formdata jquery formdata 異步上傳文件帶進欄目 HTML5 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="../resources/css/common.css" rel="stylesheet" />
<script src="../resources/js/jquery-2.1.4.js"></script>
</head>
<body>
<h2>HTML5異步上傳文件，帶進度條</h2>
<form method="post" enctype="multipart/form-data">
其餘須要提交的信息：<input type="text" name="otherInfo"/><br/><br/>
選擇要上傳的文件：<br/>
<input type="file" name="file" /><span></span><br/>
<input type="file" name="file" /><span></span><br/>
</form>
<br/><br/>
<input type="button" value="上傳吧" onclick="upload()"/>
<br/><br/>
上傳進度：<progress></progress><br/>
<p id="progress">0 bytes</p>
<p id="info"></p>
</body>
<script>
var totalSize = 0;
//綁定全部type=file的元素的onchange事件的處理函數
$(':file').change(function() {
var file = this.files[0]; //假設file標籤沒打開multiple屬性，那麼只取第一個文件就好了
name = file.name;
size = file.size;
type = file.type;
url = window.URL.createObjectURL(file); //獲取本地文件的url，若是是圖片文件，可用於預覽圖片
$(this).next().html("文件名：" + name + " 文件類型：" + type + " 文件大小：" + size + " url: " + url);
totalSize += size;
$("#info").html("總大小: " + totalSize + "bytes");
});
function upload() {
//建立FormData對象，初始化爲form表單中的數據。須要添加其餘數據可以使用formData.append("property", "value");
var formData = new FormData($('form')[0]);
//ajax異步上傳
$.ajax({
url: "http://localhost:8080/MyJavaStudio/servlet/file/upload",
type: "POST",
data: formData,
xhr: function(){ //獲取ajaxSettings中的xhr對象，爲它的upload屬性綁定progress事件的處理函數
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ //檢查upload屬性是否存在
//綁定progress事件的回調函數
myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
}
return myXhr; //xhr對象返回給jQuery使用
},
success: function(result){
$("#result").html(result.data);
},
contentType: false, //必須false纔會自動加上正確的Content-Type
processData: false //必須false纔會避開jQuery對 formdata 的默認處理
});
}
//上傳進度回調函數：
function progressHandlingFunction(e) {
if (e.lengthComputable) {
$('progress').attr({value : e.loaded, max : e.total}); //更新數據到進度條
var percent = e.loaded/e.total*100;
$('#progress').html(e.loaded + "/" + e.total+" bytes. " + percent.toFixed(2) + "%");
}
}
</script>
</html>