HTML5+Ajaxファイルアップロードプログレスバー表示（詳細なグラフィックとテキスト説明）
今回は、HTML5+Ajaxファイルアップロードプログレスバー表示（詳細な画像とテキスト）、HTML5+Ajaxファイルアップロードプログレスバーに表示される注意事項とは何ですか、以下は実際的なケースです。見てください。
当初は、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('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 ]);これら 2 つの文は、データをフォームにバインドします。 html5 は複数のファイルのアップロードをサポートしているため、
document.getElementById('fileName').files は配列を返します。ここにはファイルが 1 つしかないため、インデックス 0 の要素を削除します。
xhr.upload.addEventListener("進行状況"、uploadProgress、false);
xhr.addEventListener("load"、uploadComplete、false) );
xhr.addEventListener("abort"、uploadCanceled) 、 false);進行状況、アップロード、エラー、中断イベントをここにバインドして、何らかの対話を提供します。ファイルの進行状況は進行状況コールバックに表示されます。 次に、バックグラウンド コードとアクション構成を貼り付けます。 PHPの中国語サイトです！
推奨読書:
ajaxでJsonデータを読み取る方法
以上がHTML5+Ajaxファイルアップロードプログレスバー表示（詳細なグラフィックとテキスト説明）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7549
15
1382
52
83
11
22
90
Windows 11 の検索からニュースやトレンド コンテンツを削除する方法
Oct 16, 2023 pm 08:13 PM
Windows 11 で検索フィールドをクリックすると、検索インターフェイスが自動的に開きます。左側に最近のプログラムのリストが表示され、右側に Web コンテンツが表示されます。 Microsoft はそこにニュースやトレンドのコンテンツを表示します。今日のチェックでは、Bing の新しい DALL-E3 画像生成機能、「Chat Dragons with Bing」オファー、ドラゴンに関する詳細情報、Web セクションのトップ ニュース、ゲームの推奨事項、およびトレンド検索セクションを宣伝しています。項目のリスト全体は、コンピューター上でのアクティビティとは無関係です。一部のユーザーはニュースを表示できることに感謝しているかもしれませんが、これらはすべて他の場所で豊富に利用できます。直接的または間接的にそれをプロモーションまたは広告として分類する人もいます。 Microsoft はインターフェイスを使用して自社のコンテンツを宣伝しています。
iOS 17のスタンバイモードは充電中のiPhoneをホームハブに変える
Jun 06, 2023 am 08:20 AM
iOS 17 で Apple は、iPhone を水平方向に充電するために設計された新しいディスプレイ エクスペリエンスであるスタンバイ モードを導入します。この位置では、iPhone は一連の全画面ウィジェットを表示でき、便利なホームハブになります。 iOS 17 を実行している iPhone を充電器に水平に置くと、スタンバイ モードが自動的に有効になります。時間、天気、カレンダー、音楽コントロール、写真などを表示できます。左または右にスワイプして利用可能なスタンバイ オプションを選択し、長押しするか上下にスワイプしてカスタマイズできます。たとえば、アナログ ビュー、デジタル ビュー、バブル フォント、および時間の経過とともに背景色が時間に基づいて変化するデイライト ビューから選択できます。いくつかのオプションがあります
Windows 11 ユーザー ガイド: 広告ポップアップを無効にする方法
Sep 22, 2023 pm 07:21 PM
Microsoft の Windows 11 オペレーティング システムでは、通知システムを使用してコンピュータ上に提案がポップアップとして定期的に表示される場合があります。この提案システムは、もともと Windows 11 のワークフローを改善するためのヒントや提案をユーザーに提供するために設計されましたが、現在ではほぼ完全に Microsoft のサービスと製品を宣伝する広告システムに変わりました。提案ポップアップでは、Microsoft 365 サブスクリプションをユーザーに宣伝したり、Android スマートフォンをデバイスにリンクしたり、バックアップ ソリューションをセットアップしたりすることを提案する場合があります。これらのポップアップが煩わしい場合は、システムを調整して完全に無効にすることができます。次のガイドでは、Microsoft の Windows 11 オペレーティング システムを実行しているデバイスでポップアップを無効にするための推奨事項を示します。
デスクトップレイアウトがロックされる理由と解決策
Feb 19, 2024 pm 06:08 PM
デスクトップ レイアウトがロックされるとどうなりますか? コンピューターを使用しているときに、デスクトップ レイアウトがロックされる状況に遭遇することがあります。この問題は、デスクトップアイコンの位置を自由に調整したり、デスクトップの背景を変更したりすることができないことを意味します。では、デスクトップ レイアウトがロックされていると表示される場合、具体的には何が起こっているのでしょうか? 1. デスクトップ レイアウトとロック機能を理解する まず、デスクトップ レイアウトとデスクトップ ロックの 2 つの概念を理解する必要があります。デスクトップ レイアウトとは、ショートカット、フォルダー、ウィジェットなど、デスクトップ上のさまざまな要素の配置を指します。私たちは自由になれる
h5 とはどういう意味ですか?
Aug 02, 2023 pm 01:52 PM
H5 は、HTML の最新バージョンである HTML5 を指します。H5 は、開発者により多くの選択肢と創造的なスペースを提供する強力なマークアップ言語です。その出現は、Web テクノロジーの発展を促進し、Web ページのインタラクションと効果をより優れたものにします。H5 テクノロジーとして徐々に成熟して普及していき、インターネットの世界でますます重要な役割を果たしていくと思います。
Windows 11 でライブキャプションを即座にオンにする方法
Jun 27, 2023 am 08:33 AM
Windows 11 でライブ字幕を即座にオンにする方法 1. キーボードの Ctrl+L を押します。 2. [同意する] をクリックします。 3. 「英語 (米国) で字幕を追加する準備ができました」 (優先言語に応じて) というポップアップが表示されます。 4. さらに、歯車ボタンをクリックすると冒涜的な言葉をフィルタリングできますか?好み？悪口のフィルタリング 関連記事 Windows Server でアクティベーション エラー コード 0xc004f069 を修正する方法 Windows のアクティベーション プロセスが突然切り替わり、このエラー コード 0xc004f069 を含むエラー メッセージが表示されることがあります。ライセンス認証プロセスはオンラインですが、Windows Server を実行している一部の古いシステムではこの問題が発生する可能性があります。これらの予備チェックに合格し、合格しなかった場合は、
リモートデスクトップ接続で相手のタスクバーを表示させる方法
Jan 03, 2024 pm 12:49 PM
リモートデスクトップ接続を利用しているユーザーは多いですが、利用中に相手のタスクバーが表示されないなどのちょっとしたトラブルに遭遇する人も多いと思いますが、実は相手の設定の問題である可能性が高いです。以下の解決策。リモートデスクトップ接続時に相手のタスクバーを表示する方法： 1. まず「設定」をクリックします。 2. 次に「個人用設定」を開きます。 3. 次に、左側の「タスクバー」を選択します。 4. 画像の「タスクバーを非表示にする」オプションをオフにします。
H5、WEB フロントエンド、ビッグ フロントエンド、WEB フルスタックを区別するにはどうすればよいですか?
Aug 03, 2022 pm 04:00 PM
この記事は、H5、WEB フロントエンド、大規模フロントエンド、WEB フルスタックを簡単に区別するのに役立ちます。
