HTML5 アプリケーションでのファイルアップロードの詳細な紹介-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5 アプリケーションでのファイルアップロードの詳細な紹介

黄舟

Mar 27, 2017 pm 04:39 PM

この記事は主に HTML5 アプリケーションのファイルアップロードを紹介していますが、編集者が非常に優れていると考えたので、参考として共有します。エディターをフォローして見てみましょう

開発者の多くはこの問題を解決するためにフラッシュを採用してきましたが、フラッシュは万能薬ではありません。、断片化によって引き起こされる問題が時々発生する代わりに、それは悪夢になりました。一部の Web サイトでは、form タグの enctype=multipart/form-data 属性を使用しますが、この属性は進行状況を表示するためにサーバーに特別な設定を行う必要があり、複雑であるためエラーが発生しやすくなります。欲しい。

それでは、なぜ Html5 がこの問題を解決できるのか、そしてそれがどの程度うまく解決できるのかを見てみましょう。

HTML5 を使用してファイルをアップロードする

HTML5 標準では、XMLHttpRequest オブジェクトが再定義され、「XMLHttpRequest レベル 2」と呼ばれます。これには、次の 5 つの新機能が含まれています:

1. 文字のアップロードとダウンロードをサポートします。ファイル、BLOB、フォームデータなど

2. アップロードとダウンロードに進行状況イベントを追加しました

3. クロスドメインリクエストのサポート (つまり、HTTP のリファラー部分の送信を許可しません)

5. リクエストタイムアウトの設定を許可する

このチュートリアルでは、主に 1 番目と 2 番目の機能、特に 2 番目の機能に焦点を当てます。これにより、必要なアップロードの進行状況が提供されます。前のソリューションとは異なり、このソリューションはサーバー上で特別な設定を必要としないため、チュートリアルを見ながら試すことができます。

HTML5 アプリケーションでのファイルアップロードの詳細な紹介

HTML5 アプリケーションでのファイルアップロードの詳細な紹介上の図は、私たちが達成できることを示しています:

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>

ログイン後にコピー

JavaScript

HTML で入力を使用すると、JS コードで FileList オブジェクトを取得できます。このオブジェクトは、HTML5 で新しく追加されたファイル API の一部です。各 FileList オブジェクトはファイルオブジェクトのコレクションであり、ファイルオブジェクトには次の属性があります:

1. ファイル名 (パスを除く)

2.ファイルの MIME タイプ (小文字)

3. size – ファイルのサイズ (バイト単位)

これがまさに必要なものです。もちろん、HTML5 には FileReader オブジェクトがありますが、ここでは使用しません。この度、上記3つの内容により、ユーザーがアップロードするファイルサイズとファイルタイプを制御することで、再検出時のサーバーへの負荷を軽減し、セキュリティ要素を向上させることができました。

 function fileSelected() {
  var file = document.getElementById(&#39;fileToUpload&#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 xhr = new XMLHttpRequest();
  var fd = document.getElementById(&#39;form1&#39;).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(&#39;progressNumber&#39;).innerHTML = percentComplete.toString() + &#39;%&#39;;
  }
  else {
    document.getElementById(&#39;progressNumber&#39;).innerHTML = &#39;unable to compute&#39;;
  }
}

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(&#39;fileToUpload&#39;).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(&#39;fileToUpload&#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("fileToUpload", document.getElementById(&#39;fileToUpload&#39;).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(&#39;progressNumber&#39;).innerHTML = percentComplete.toString() + &#39;%&#39;;
        }
        else {
          document.getElementById(&#39;progressNumber&#39;).innerHTML = &#39;unable to compute&#39;;
        }
      }

      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的美化等等。不过这就不是我们这篇文章的主题了。

最后，提醒一下，教程的代码应当在支持新特性的浏览器之上运行，如果你不清楚自己的浏览器是否支持，可以在这里查询。

移动端通过HTML5实现文件上传功能

php中文件上传图片

JavaScript进阶(九)JS实现本地文件上传至阿里云服务器

以上がHTML5 アプリケーションでのファイルアップロードの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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