この記事は主に HTML5 アプリケーションのファイルアップロードを紹介していますが、編集者が非常に優れていると考えたので、参考として共有します。エディターをフォローして見てみましょう
開発者の多くはこの問題を解決するためにフラッシュを採用してきましたが、フラッシュは万能薬ではありません。 、断片化によって引き起こされる問題が時々発生する代わりに、それは悪夢になりました。一部の Web サイトでは、form タグの enctype=multipart/form-data 属性を使用しますが、この属性は進行状況を表示するためにサーバーに特別な設定を行う必要があり、複雑であるためエラーが発生しやすくなります。欲しい。
それでは、なぜ Html5 がこの問題を解決できるのか、そしてそれがどの程度うまく解決できるのかを見てみましょう。
HTML5 を使用してファイルをアップロードする
HTML5 標準では、XMLHttpRequest オブジェクトが再定義され、「XMLHttpRequest レベル 2」と呼ばれます。これには、次の 5 つの新機能が含まれています:
1. 文字のアップロードとダウンロードをサポートします。ファイル、BLOB、フォーム データなど
2. アップロードとダウンロードに進行状況イベントを追加しました
3. クロスドメイン リクエストのサポート (つまり、HTTP のリファラー部分の送信を許可しません)
5. リクエスト タイムアウトの設定を許可する
このチュートリアルでは、主に 1 番目と 2 番目の機能、特に 2 番目の機能に焦点を当てます。これにより、必要なアップロードの進行状況が提供されます。前のソリューションとは異なり、このソリューションはサーバー上で特別な設定を必要としないため、チュートリアルを見ながら試すことができます。
上の図は、私たちが達成できることを示しています:
1. ファイル名、タイプ、サイズなどのアップロードされたファイル情報を表示します
2. 実際の進行状況を表示できる進行状況バー
3. . アップロード速度
4. 残り時間の推定
5. アップロード完了後にサーバーから返されるレスポンス
さらに、XMLHttpRequest では、アップロード プロセス全体が非同期です。ユーザーがファイルをアップロードするときも、Web ページ内の他の要素を操作できるため、アップロードが完了するまで待つ必要はありません。アップロードが完了すると、サーバーから応答が返されるので、アップロード プロセス全体は非常に論理的であるように見えます。
HTML5 進捗イベントHTML5 では、新しい進捗イベント (進捗イベント) が追加されました: 1. 合計 – ファイル サイズ
2. アップロードされたサイズ。
3. lengthComputable – 進行状況を計算できるかどうか 情報はあまりありませんが、ファイルの進行状況を計算するには十分です。もちろん、直接与えられないものもたくさんありますが、それは残念です。HTML
は、通常のファイルアップロードコードとあまり変わりません。ただし、input タグは変更時に JavaScript 関数に関連付けられることに注意してください。 <!DOCTYPE html>
<html>
<head>
<title>使用XMLHttpRequest上传文件</title>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="upload.php">
<p class="row">
<label for="fileToUpload">Select a File to Upload</label>
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
</p>
<p id="fileName"></p>
<p id="fileSize"></p>
<p id="fileType"></p>
<p class="row">
<input type="button" onclick="uploadFile()" value="Upload" />
</p>
<p id="progressNumber"></p>
</form>
</body>
</html>JavaScript1. ファイル名 (パスを除く)
2.ファイルの MIME タイプ (小文字) 3. size – ファイルのサイズ (バイト単位) これがまさに必要なものです。もちろん、HTML5 には FileReader オブジェクトがありますが、ここでは使用しません。この度、上記3つの内容により、ユーザーがアップロードするファイルサイズとファイルタイプを制御することで、再検出時のサーバーへの負荷を軽減し、セキュリティ要素を向上させることができました。 function fileSelected() {
var file = document.getElementById('fileToUpload').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 xhr = new XMLHttpRequest();
var fd = document.getElementById('form1').getFormData();
/* event listners */
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
/* Be sure to change the url below to the url of your upload server side script */
xhr.open("POST", "upload.php");
xhr.send(fd);
}
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) {
/* This event is raised when the server send back a response */
alert(evt.target.responseText);
}
function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
function uploadCanceled(evt) {
alert("The upload has been canceled by the user or the browser dropped the connection.");
}コードの 2 行目では、JS コードは HTML5 で導入された別の新しいオブジェクトである FormData を使用しています。 FormData オブジェクトはユーザー フォーム データのコレクションであり、キーと値のペアの形式でフォーム データを保存します。その値には数値、文字列、ファイルを含めることができます。このオブジェクトをスローすることで、データをサーバーに送信します。
もちろん、このオブジェクトをコード内で手動で構築することもできます。たとえば次のようになります。
var fd = new FormData();
fd.append("author", "Shiv Kumar");
fd.append("name", "Html 5 File API/FormData");
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);トピックに戻ります。前のコードを振り返ると、ファイルアップロードの実際の状況を取得することを目的として、XMLHttpRequest に関連するイベント リスナーを多数追加しました。フックしているのは XMLHttpRequest 自体ではなく、その属性 (uploadProgress など) であることに注意することが特に重要です。
完全なコード
<!DOCTYPE html>
<html>
<head>
<title>Upload Files using XMLHttpRequest - Minimal</title>
<script type="text/javascript">
function fileSelected() {
var file = document.getElementById('fileToUpload').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("fileToUpload", document.getElementById('fileToUpload').files[0]);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "UploadMinimal.aspx");
xhr.send(fd);
}
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) {
/* This event is raised when the server send back a response */
alert(evt.target.responseText);
}
function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
function uploadCanceled(evt) {
alert("The upload has been canceled by the user or the browser dropped the connection.");
}
</script>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="upload.php">
<p class="row">
<label for="fileToUpload">Select a File to Upload</label>
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
</p>
<p id="fileName"></p>
<p id="fileSize"></p>
<p id="fileType"></p>
<p class="row">
<input type="button" onclick="uploadFile()" value="Upload" />
</p>
<p id="progressNumber"></p>
</form>
</body>
</html>我们的任务完成了吗？可以说完成了，因为这段代码已经能够完成上传文件的任务，而且也能够显示上传的进度；但是理应说我们没有，因为除了这个骨架HTML之外，我们还有很多没有做的事情，比如CSS的美化等等。不过这就不是我们这篇文章的主题了。
最后，提醒一下，教程的代码应当在支持新特性的浏览器之上运行，如果你不清楚自己的浏览器是否支持，可以在这里查询。
相关文章：
JavaScript进阶(九)JS实现本地文件上传至阿里云服务器
以上がHTML5 アプリケーションでのファイルアップロードの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
H5は何を参照していますか？コンテキストの探索Apr 12, 2025 am 12:03 AMH5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1）html5introduceSnewelementsandapisforrich、dynamicwebapplications.2）Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3）semanticelementsimprovecontentstructurendseo.4）H5'srespo
H5：ツール、フレームワーク、およびベストプラクティスApr 11, 2025 am 12:11 AMH5開発で習得する必要があるツールとフレームワークには、Vue.JS、React、Webpackが含まれます。 1.Vue.jsは、ユーザーインターフェイスの構築に適しており、コンポーネント開発をサポートします。 2.複雑なアプリケーションに適した仮想DOMを介したページレンダリングを最適化します。 3.Webpackは、モジュールのパッケージングに使用され、リソースの読み込みを最適化します。
HTML5の遺産：現在のH5の理解Apr 10, 2025 am 09:28 AMhtml5hassificlytransformdedwebdeveverment byintroducingsingingelements、endincemultimediasupport、およびrequrovingperformance.1）itmadewebsitesmoreaccessibleandseo-frendlywithsemantelementslike、and.2）
H5コード：アクセシビリティとセマンティックHTMLApr 09, 2025 am 12:05 AMH5は、セマンティック要素とARIA属性を介して、WebページのアクセシビリティとSEO効果を改善します。 1.使用などを使用して、コンテンツ構造を整理し、SEOを改善します。 2。ARIA-LabelなどのARIA属性はアクセシビリティを強化し、支援技術ユーザーはWebページをスムーズに使用できます。
H5はHTML5と同じですか？Apr 08, 2025 am 12:16 AM「H5」と「HTML5」はほとんどの場合同じですが、特定の特定のシナリオでは異なる意味を持つ可能性があります。 1。「HTML5」は、新しいタグとAPIを含むW3C定義標準です。 2。 "H5"は通常、HTML5の略語ですが、モバイル開発では、HTML5に基づくフレームワークを参照する場合があります。これらの違いを理解することは、プロジェクトでこれらの用語を正確に使用するのに役立ちます。
H5の機能は何ですか？Apr 07, 2025 am 12:10 AMH5、またはHTML5は、HTMLの5番目のバージョンです。開発者により強力なツールセットを提供し、複雑なWebアプリケーションを簡単に作成できるようにします。 H5のコア関数には、次のものが含まれます。1）Webページにグラフィックとアニメーションを描画できる要素。 2）Webページ構造をSEOの最適化を明確かつ助長させるなどのセマンティックタグなど。 3）Geolocationapiなどの新しいAPIは、ロケーションベースのサービスをサポートします。 4）互換性テストとポリフィルライブラリを通じて、クロスブラウザーの互換性を確保する必要があります。
H5リンクの実行方法Apr 06, 2025 pm 12:39 PMH5リンクを作成する方法は？リンクターゲットを決定します。H5ページまたはアプリケーションのURLを取得します。 HTMLアンカーの作成：＆lt; a＆gt;を使用しますアンカーを作成し、リンクターゲットURLを指定するタグ。リンクプロパティの設定（オプション）：必要に応じて、ターゲット、タイトル、およびオンクリックプロパティを設定します。 Webページに追加：リンクを表示するWebページにHTMLアンカーコードを追加します。
H5互換性の問題を解決する方法Apr 06, 2025 pm 12:36 PMH5互換性の問題のソリューションには、次のものが含まれます。Webページが画面サイズに応じてレイアウトを調整できるレスポンシブデザインを使用します。クロスブラウザーテストツールを使用して、リリース前に互換性をテストします。 PolyFillを使用して、古いブラウザの新しいAPIのサポートを提供します。 Web標準に従って、効果的なコードとベストプラクティスを使用します。 CSSプリプロセッサを使用して、CSSコードを簡素化し、可読性を向上させます。画像を最適化し、Webページのサイズを削減し、ロードをスピードアップします。 HTTPSがWebサイトのセキュリティを確保できるようにします。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
ドリームウィーバー CS6
ビジュアル Web 開発ツール
WebStorm Mac版
便利なJavaScript開発ツール
