HTML5 Ajax文件上傳進(jìn)度條如何顯示
發(fā)表時(shí)間：2024-05-10 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]這篇文章主要介紹了HTML5 Ajax文件上傳進(jìn)度條是如何顯示的，基于原生html5實(shí)現(xiàn)，不需要falsh支持，進(jìn)度可以自定義顯示，控制靈活，對(duì)HTML5上傳進(jìn)度條感興趣的小伙伴們可以參考一下原本打算使用jquery插件進(jìn)行異步文件上傳，比如uploadfy但是需要額外的支持，也有人用iframe...
這篇文章主要介紹了HTML5 Ajax
文件上傳進(jìn)度條是如何顯示的，基于原生html5實(shí)現(xiàn)，不需要falsh支持，進(jìn)度可以自定義顯示，控制靈活，對(duì)HTML5上傳進(jìn)度條感興趣的小伙伴們可以參考一下
原本打算使用jquery插件進(jìn)行異步文件上傳，比如uploadfy但是需要額外的支持，也有人用iframe模仿異步上傳機(jī)制，感覺(jué)都比較別扭。因?yàn)轫?xiàng)目不考慮低版本瀏覽器，所以決定用html5實(shí)現(xiàn)。下面只是一個(gè)簡(jiǎn)單的demo，具體樣式需要自己去做。
后臺(tái)基于strut2進(jìn)行文件處理，具體因項(xiàng)目而定。只是要注意設(shè)置文件大小的限制。 <constant name="struts.multipart.maxSize" value="52428800"/>這個(gè)配置根據(jù)具體情況設(shè)定，超過(guò)此值會(huì)報(bào)404.
首先是上傳頁(yè)面,比較簡(jiǎn)單，附帶了文件上者這個(gè)參數(shù)。
upload.jsp
<%@page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<title>使用XMLHttpRequest上傳文件</title>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
//監(jiān)聽(tīng)選擇文件信息
function fileSelected() {
//HTML5文件API操作
var file = document.getElementById('fileName').files[0];
if (file) {
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
}
}
//上傳文件
function uploadFile() {
var fd = new FormData();
//關(guān)聯(lián)表單數(shù)據(jù),可以是自定義參數(shù)
fd.append("name", document.getElementById('name').value);
fd.append("fileName", document.getElementById('fileName').files[0]);
//監(jiān)聽(tīng)事件
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
//發(fā)送文件和表單自定義參數(shù)
xhr.open("POST", "<%=path%>/user/uploadifyTest_doUpload");
xhr.send(fd);
}
//取消上傳
function cancleUploadFile(){
xhr.abort();
}
//上傳進(jìn)度
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
}
//上傳成功響應(yīng)
function uploadComplete(evt) {
//服務(wù)斷接收完文件返回的結(jié)果
alert(evt.target.responseText);
}
//上傳失敗
function uploadFailed(evt) {
alert("上傳失敗");
}
//取消上傳
function uploadCanceled(evt) {
alert("您取消了本次上傳.");
}
</script>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="upload.php">
<p class="row">
<label for="fileToUpload">選擇文件</label>
<input type="file" name="fileName" id="fileName" onchange="fileSelected();"/>
</p>
<p id="fileName"></p>
<p id="fileSize"></p>
<p id="fileType"></p>
<p class="row">
上傳者：<input type="text" name="name" id="name"/>
<input type="button" onclick="uploadFile()" value="上傳" />
<input type="button" onclick="cancleUploadFile()" value="取消" />
</p>
<p id="progressNumber"></p>
</form>
</body>
</html>fd.append("name", document.getElementById('name').value);
fd.append("fileName", document.getElementById('fileName').files[0]);
這兩句是把數(shù)據(jù)綁定到表單。因?yàn)閔tml5支持多文件上傳，所以
document.getElementById('fileName').files
返回的是數(shù)組。這里只有一個(gè)文件所以取下標(biāo)0的元素。
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
這里綁定進(jìn)度、上傳、錯(cuò)誤、中斷的事件，提供一些交互。文件進(jìn)度顯示就是在progress回調(diào)中進(jìn)行顯示的。
然后貼上后臺(tái)代碼和action配置，UploadifyTestAction.java
package com.bjhit.eranges.actions.test;
import java.io.File;
import com.opensymphony.xwork2.ActionSupport;
public class UploadifyTestAction extends ActionSupport {
private static final long serialVersionUID = 837481714629791752L;
private File fileName;
private String name;
private String responseInfo;
public String doUpload() throws Exception {
System.out.println(name);
File myFile = fileName;
System.out.println(myFile.getName());
responseInfo = "上傳成功!";
return "doUpload";
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public File getFileName() {
return fileName;
}
public void setFileName(File fileName) {
this.fileName = fileName;
}
public String getResponseInfo() {
return responseInfo;
}
public void setResponseInfo(String responseInfo) {
this.responseInfo = responseInfo;
}
}action配置
<!-- 文件上傳例子 -->
<action name="uploadifyTest_*" class="com.bjhit.eranges.actions.test.UploadifyTestAction" method="{1}">
<result name="doUpload" type="json">
<param name="includeProperties">responseInfo</param>
<param name="excludeNullProperties">true</param>
</result>
</action>以上就是本篇文章的所有內(nèi)容了，希望對(duì)大家學(xué)習(xí)提供到幫助��！
相關(guān)推薦：
原生js實(shí)現(xiàn)html5打磚塊小游戲的方法
Ajax實(shí)現(xiàn)無(wú)閃爍定時(shí)刷新頁(yè)面實(shí)例代碼
有關(guān)Ajax中g(shù)et和post的使用問(wèn)題
以上就是HTML5 Ajax文件上傳進(jìn)度條如何顯示的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
