Comment afficher la barre de progression du téléchargement du fichier HTML5 Ajax-tutoriel HTML-php.cn

Comment afficher la barre de progression du téléchargement du fichier HTML5 Ajax

韦小宝

Libérer： 2018-01-10 09:58:02

original

2756 Les gens l'ont consulté

Cet article présente principalement comment HTML5 Ajaxtéléchargement de fichiers barre de progression est affichée. Elle est basée sur l'implémentation HTML5 native et ne nécessite pas de prise en charge Flash. La progression peut être personnalisée et affichée. , et le contrôle est flexible. , les amis qui sont intéressés par la barre de progression du téléchargement HTML5 peuvent se référer à

J'avais initialement prévu d'utiliser le plug-in jquery pour le téléchargement de fichiers asynchrone, tel que uploadfy, mais il a besoin d'un support supplémentaire. Certaines personnes utilisent iframe pour imiter le mécanisme de téléchargement asynchrone, ce qui semble plutôt 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 lorsque vous définissez 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(&#39;fileName&#39;).files[0];
  if (file) {
   var fileSize = 0;
   if (file.size > 1024 * 1024)
   fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + &#39;MB&#39;;
   else
   fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + &#39;KB&#39;;

   document.getElementById(&#39;fileName&#39;).innerHTML = &#39;Name: &#39; + file.name;
   document.getElementById(&#39;fileSize&#39;).innerHTML = &#39;Size: &#39; + fileSize;
   document.getElementById(&#39;fileType&#39;).innerHTML = &#39;Type: &#39; + file.type;
  }
  }
 
 //上传文件
 function uploadFile() {
  var fd = new FormData();
  //关联表单数据,可以是自定义参数
  fd.append("name", document.getElementById(&#39;name&#39;).value);
  fd.append("fileName", document.getElementById(&#39;fileName&#39;).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(&#39;progressNumber&#39;).innerHTML = percentComplete.toString() + &#39;%&#39;;
  }
  else {
   document.getElementById(&#39;progressNumber&#39;).innerHTML = &#39;unable to compute&#39;;
  }
 }

 //上传成功响应
 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. Ensuite, collez 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

Ce qui précède est tout le contenu de cet article, j'espère cela sera utile. Tout le monde apprend et fournit de l'aide ! !

Recommandations associées :

Comment implémenter un jeu de casse-briques HTML5 à l'aide de js natif

Exemple de code Ajax pour une page programmée sans scintillement actualiser

À propos de l'utilisation de get et post en Ajax

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!