HTML5 Ajax ファイルアップロードの進行状況バーを表示する方法-htmlチュートリアル-php.cn

HTML5 Ajax ファイルアップロードの進行状況バーを表示する方法

韦小宝

リリース： 2018-01-10 09:58:02

オリジナル

2670 人が閲覧しました

この記事では、HTML5 Ajaxファイルのアップロード進行状況バーがどのように表示されるかを主に紹介します。これは、ネイティブのHTML5実装に基づいており、進行状況をカスタマイズでき、制御が柔軟です。アップロード進行状況バー友達の皆さん、これを参照してください

私は当初、uploadfy などの非同期ファイルアップロードに jquery プラグインを使用する予定でしたが、追加のサポートが必要です。非同期アップロードメカニズムを模倣するために iframe を使用する人もいます。。このプロジェクトでは下位バージョンのブラウザーは考慮されていないため、実装には HTML5 を使用することが決定されました。以下は簡単なデモです。特定のスタイルは自分で作成する必要があります。
背景はファイル処理用のstrut2に基づいていますが、これはプロジェクトによって異なります。ファイルサイズ制限の設定には注意してください。この設定は、特定の状況に応じて設定されます。
最初はアップロードページです。ファイルアップローダーのパラメータが付属しています。

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>

ログイン後にコピー

fd.append("name", document.getElementById('name').value);
fd.append("fileName", document.getElementById('fileName').files[0 ]);
これらの 2 つの文は、データをフォームにバインドします。 html5 は複数のファイルのアップロードをサポートしているため、
document.getElementById('fileName').files
は配列を返します。ここにはファイルが 1 つしかないため、インデックス 0 の要素を削除します。

xhr.upload.addEventListener("進行状況"、uploadProgress、false);

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

xhr.addEventListener ("abort"、uploadCanceled、false);進行状況、アップロード、エラー、中断イベントをここにバインドして、何らかの対話を提供します。ファイルの進行状況は進行状況コールバックに表示されます。

次に、バックグラウンドコードとアクション構成を貼り付け、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 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>

ログイン後にコピー

この記事の内容はこれですべてです。皆さんの学習に役立つことを願っています。！