Dieses Mal bringe ich Ihnen HTML5+AjaxDatei-UploadFortschrittsbalkenAnzeige (detaillierte grafische und Texterklärung), HTML5+Ajax-Datei-Upload-Fortschrittsbalken-AnzeigeNotizenWas sind das? Hier sind praktische Fälle.
Ursprünglich hatte ich geplant, das JQuery-Plug-In für den asynchronen Datei-Upload zu verwenden, z. B. uploadfy, aber es benötigt zusätzliche Unterstützung. Einige Leute verwenden iframe, um den asynchronen Upload-Mechanismus zu imitieren, was sich umständlich anfühlt. Da das Projekt keine Browser niedrigerer Versionen berücksichtigt, wurde beschlossen, HTML5 für die Implementierung zu verwenden. Das Folgende ist nur eine einfache Demo. Sie müssen den spezifischen Stil selbst erstellen.
Der Hintergrund basiert je nach Projekt auf strut2 für die Dateiverarbeitung. Achten Sie nur darauf, Dateigrößenbeschränkungen festzulegen.
<%@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();
//监听选择文件信息
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();
//关联表单数据,可以是自定义参数
fd.append("name", document.getElementById('name').value);
fd.append("fileName", document.getElementById('fileName').files[0]);
//监听事件
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
//发送文件和表单自定义参数
xhr.open("POST", "<%=path%>/user/uploadifyTest_doUpload");
xhr.send(fd);
}
//取消上传
function cancleUploadFile(){
xhr.abort();
}
//上传进度
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';
}
}
//上传成功响应
function uploadComplete(evt) {
//服务断接收完文件返回的结果
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]);
Diese beiden Sätze binden Daten an das Formular. Da HTML5 das Hochladen mehrerer Dateien unterstützt, gibt
document.getElementById('fileName').files ein Array zurück. Es gibt hier nur eine Datei, also entfernen Sie das Element mit Index 0.
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);Verknüpfen Sie hier Fortschritts-, Upload-, Fehler- und Unterbrechungsereignisse, um eine gewisse Interaktion zu ermöglichen. Der Dateifortschritt wird im Fortschrittsrückruf angezeigt. Fügen Sie dann den Hintergrundcode und die Aktionskonfiguration UploadifyTestAction.java ein.
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 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>Ajax-Methode zum Lesen von JSON-Daten
Konstruieren von AJAX zur Implementierung der Formular-JSON-Konvertierungsmethode
Das obige ist der detaillierte Inhalt vonAnzeige des Fortschrittsbalkens für das Hochladen von HTML5+Ajax-Dateien (detaillierte Grafik- und Texterklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
was ist h5
So implementieren Sie h5, um nach oben zu rutschen und die nächste Seite auf der Webseite zu laden
Welche Tipps gibt es für die Verwendung von Dezender?
So richten Sie die Antiblockierfunktion von WeChat ein
Verwendung der Get-Funktion in C-Sprache
Was sind die regulären Ausdrücke in PHP?
Der Unterschied zwischen Mac Air und Pro
Verwendung von Head-Befehlen
