Affichage de la barre de progression du téléchargement de fichiers HTML5+Ajax (explication graphique et textuelle détaillée)-js tutoriel-php.cn

Affichage de la barre de progression du téléchargement de fichiers HTML5+Ajax (explication graphique et textuelle détaillée)

php中世界最好的语言

Libérer： 2018-04-04 16:33:49

original

2232 Les gens l'ont consulté

Cette fois, je vous propose HTML5+AjaxTéléchargement de fichiers Barre de progressionAffichage (explication graphique et textuelle détaillée), HTML5+Ajax Affichage de la barre de progression du téléchargement de fichiersNotesQu'est-ce que c'est ? Voici des cas pratiques.

À l'origine, j'avais prévu d'utiliser le plug-in jquery pour le téléchargement de fichiers asynchrone, tel que uploadfy, mais il nécessite un support supplémentaire. Certaines personnes utilisent iframe pour imiter le mécanisme de téléchargement asynchrone, ce qui semble gênant. Étant donné que le projet ne prend pas en compte les versions inférieures des navigateurs, il a été décidé d'utiliser HTML5 pour l'implémentation. Ce qui suit n'est qu'une simple démo, vous devez créer vous-même le style spécifique.
L'arrière-plan est basé sur strut2 pour le traitement des fichiers, selon le projet. Faites simplement attention à définir des limites de taille de fichier. Cette configuration est définie en fonction de la situation spécifique si elle dépasse cette valeur, 404 sera signalée. , qui est relativement simple et fourni avec le fichier ou ce paramètre.

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>

Copier après la connexion

fd.append("name", document.getElementById('name').value);fd.append("fileName ", document.getElementById('fileName').files[0]);
Ces deux phrases lient les données au formulaire. Étant donné que HTML5 prend en charge plusieurs téléchargements de fichiers,
document.getElementById('fileName').files renvoie un tableau. Il n'y a qu'un seul fichier ici, supprimez donc l'élément d'index 0.

xhr.upload.addEventListener("progress", uploadProgress, false);

xhr.addEventListener("load", uploadComplete, false);

xhr.addEventListener("erreur", uploadFailed, false);

xhr.addEventListener("abort", uploadCanceled, false);Liez ici les événements de progression, de téléchargement, d'erreur et d'interruption pour fournir une certaine interaction. La progression du fichier est affichée dans le rappel de progression. Collez ensuite le code d'arrière-plan et la configuration de l'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;
 }
}

Copier après la connexion

configuration de l'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>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article, veuillez venir pour des informations plus intéressantes. Faites attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment lire des données Json avec ajax

Comment construire AJAX pour implémenter la conversion de formulaire JSON

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!