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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

韦小宝

Jan 10, 2018 am 09:58 AM

ajaxh5html5

この記事では、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>

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

関連する推奨事項:

ネイティブ JS を使用して HTML5 ブロック崩しゲームを実装する方法

ちらつきのないスケジュールされた更新ページのサンプルコードの Ajax 実装

Ajax での get および post の使用に関する質問

以上がHTML5 Ajax ファイルアップロードの進行状況バーを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLタグの目的は何ですか？Apr 28, 2025 am 12:02 AM

htmltagsareSterentionforturturingwebpages、EnhinceAccessibility、seo、andporformance.1）theyclosedinagure bracketetsandinginging inpairstocreateahierarchStructure.2）semanticagslikeandimproveuserexperienceandseo.3）

自己閉鎖タグとは何ですか？例を挙げてください。Apr 27, 2025 am 12:04 AM

セルフクロージングのlandxmlareTagstatemtatemsem onedinedingsingaseparateclosingtag、SimmarifiedMarkupStructureanddendingCodingInefciency.1）areEssentionalinforementswithoutcontent、2）

HTMLを超えて：Web開発のための重要なテクノロジーApr 26, 2025 am 12:04 AM

強力な機能と優れたユーザーエクスペリエンスを備えたWebサイトを構築するには、HTMLだけでは十分ではありません。次のテクノロジーも必要です。JavaScriptは、Webページに動的とインタラクティブ性を与え、リアルタイムの変更がDOMを操作することで達成されます。 CSSは、美学とユーザーエクスペリエンスを向上させるために、Webページのスタイルとレイアウトを担当しています。 React、Vue.JS、Angularなどの最新のフレームワークとライブラリは、開発効率とコード組織構造を改善します。

HTMLのブール属性とは何ですか？いくつかの例を挙げてください。Apr 25, 2025 am 12:01 AM

ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。