Heim > Artikel > Web-Frontend > Anzeige des Fortschrittsbalkens für das Hochladen von HTML5+Ajax-Dateien (detaillierte Grafik- und Texterklärung)

Anzeige des Fortschrittsbalkens für das Hochladen von HTML5+Ajax-Dateien (detaillierte Grafik- und Texterklärung)

php中世界最好的语言Original: 2018-04-04 16:33:492122Durchsuche

Dieses Mal bringe ich Ihnen HTML5+AjaxDatei-Upload FortschrittsbalkenAnzeige (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. Diese Konfiguration wird entsprechend der spezifischen Situation festgelegt. Wenn dieser Wert überschritten wird, wird 404 gemeldet , was relativ einfach ist und mit der Datei oder diesem Parameter geliefert wird.

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();
 
 //监听选择文件信息
 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;
 }
}

Aktionskonfiguration

<!-- 文件上传例子 -->
<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>

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte kommen Sie für weitere spannende Informationen. Beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

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!

php json html5 jquery ajax struts Error append 事件异步

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ajax implementiert einen einfachen Dropdown-Optionseffekt (ausführliche Erklärung mit Bildern und Text)Nächster Artikel：Ajax implementiert einen einfachen Dropdown-Optionseffekt (ausführliche Erklärung mit Bildern und Text)

In Verbindung stehende Artikel

Mehr sehen