ホームページ > 記事 > ウェブフロントエンド > HTML5 ファイルインターフェイスを使用して Web ページでファイルのダウンロードを使用する方法

HTML5 ファイルインターフェイスを使用して Web ページでファイルのダウンロードを使用する方法

不言オリジナル: 2018-06-09 17:41:252248ブラウズ

この記事では、主に HTML5 ファイルインターフェイスを使用して Web ページにファイルをダウンロードする方法を紹介します。これは、必要な友人に参照してもらうために共有します。

ファイルインターフェイスは、ファイル関連の情報を提供します。をクリックし、Web ページ上で JavaScript を実行して、ファイル内のコンテンツにアクセスします。次に、この記事では、Web ページでファイルのダウンロード機能を使用するための HTML5 ファイルインターフェースについて説明します。必要な友達はそれを参照してください

ファイルインターフェースは、ファイルに関連する情報を提供し、Web ページ上で JavaScript を実行します。ファイルの内容にアクセスします。

File オブジェクトは、ユーザーが input タグを使用してファイルを選択することによって返される FileList オブジェクト、およびドラッグアンドドロップ操作の DataTransfer オブジェクトから取得されます。 File オブジェクトは、Blob が使用できるあらゆるコンテキストで使用できる特別なタイプの BLOB です。

Web ページでファイルを使用するには、通常、File オブジェクト、FileList オブジェクト、および FileReader オブジェクトが関係するオブジェクトです。

FileList オブジェクト

FileList は、input 要素の files 属性とドラッグアンドドロップ API (ファイルをドラッグする場合、event.DataTransfer.files は FileList オブジェクトです) の 2 つの場所から取得されます

<input id="fileItem" type="file">
var fileList = document.getElementById(&#39;fileItem&#39;).files

FileList オブジェクトの標準プロパティ

length: これは読み取り専用プロパティであり、FileList オブジェクトに含まれる File オブジェクトの長さを返します。

FileList オブジェクトの標準メソッド

item(index): FileList オブジェクト内の指定された位置にある File オブジェクトを取得します。配列インデックスの形式で省略できます

File オブジェクト

FileList オブジェクト内のすべての項目は File オブジェクトです。ファイルオブジェクトは特別な種類の BLOB です。

File オブジェクトの標準属性

1.lastModified: ファイルが変更された時間を返します。この時間は、1970 年 1 月 1 日の 0:00:00 から経過したミリ秒数です。これは読み取り専用属性です

2.name: ファイルオブジェクトによって参照されるファイルのファイル名を返します。これは読み取り専用属性です

3.type: ファイルによって参照されるファイルのファイルタイプを返します。これは MINE タイプです。これは読み取り専用のプロパティです。

4.size: ファイルオブジェクトによって参照されるファイルのファイルサイズを返します。これは読み取り専用の属性です。

File オブジェクトの標準メソッド

File オブジェクトには個別のメソッドは定義されていませんが、Blob オブジェクトから継承されたメソッドがあります。

FileReader オブジェクト

FileReader オブジェクトを使用すると、Web アプリケーションはユーザーのコンピューター上のファイルを非同期的に読み取ることができます。

FileReader() は、新しい FileReader オブジェクトを作成できるコンストラクターです。

var fileReader = new FileReader();

FileReader オブジェクトの標準プロパティ

1.error: ファイルの読み取り中に発生したエラーを返します。

2.result: ファイルの内容を返します。戻り値の型は String または ArrayBuffer です。この属性は、読み取り操作が完了した後にのみ有効です。

3.readyState: 読み取り操作の現在のステータスを返します。可能な値は 0: 読み取りが開始されていない、1: 読み取り、2: 読み取りが完了しました。

FileReader オブジェクトの標準メソッド

1.abort(): 読み取り操作を中止します。 ReadyState の値は 2.

2.readAsArrayBuffer(Blob): File オブジェクトなどの指定された Blob を読み取ります (File オブジェクトは特殊な Blob)。読み取りが完了するとすぐに、readyState 属性の値は 2 になり、result 属性はファイルデータを表す ArrayBuffer になります。

3.readAsDataURL(Blob): File オブジェクトなどの指定された Blob を読み取ります (File オブジェクトは特別な Blob)。読み込みが完了するとreadyState属性の値は2になり、result属性はファイルデータを表すURL、データ形式はbase64でエンコードされた文字列になります

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

function previewFile() {
  var preview = document.querySelector(&#39;img&#39;);
  var file    = document.querySelector(&#39;input[type=file]&#39;).files[0];
  var reader  = new FileReader();
  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);
  if (file) {
    reader.readAsDataURL(file);
  }
}

4.readAsText( Boob, encoding): File オブジェクトなどの指定された Blob を読み取ります (File オブジェクトは特別な Blob です)。読み取りが完了するとすぐに、readyState 属性の値は 2 になり、result 属性はファイルデータを表すテキスト文字列になります。 2 番目のパラメータはオプションで、結果属性のテキスト文字列のエンコードを指定するために使用されます。デフォルトは UTF-8 です。

FileReader オブジェクトイベント

1.abort: 読み取り操作が終了するとトリガーされます。

2.error: 読み取り操作中にエラーが発生するとトリガーされます。

3.load: 読み取り操作が正常に完了するとトリガーされます。

4.loadend: 読み取り操作が終了するとトリガーされます。読み取り成功でも読み取り失敗でもありません。

5.loadStart: 読み取り操作の開始時にトリガーされます。

6.process: 読み取り中にトリガーされます。

Web アプリケーションでのファイルの使用

HTML5 のファイルオブジェクトを使用すると、選択したローカルファイルにアクセスし、これらのファイルの内容を読み取ることができます。ファイルオブジェクトは、入力要素またはドラッグアンドドロップインターフェイスから取得されます。

通过input元素选择文件

<input type="file" id="input">

访问通过input选择的文件

var selectedFile = document.getElementById(&#39;input&#39;).files[0];

上述代码段一次只能选择一个文件，如果一次要选择多个文件，就需要给input元素添加一个multiple属性，并将multiple属性设置我true。在Gecko 1.9.2之前不支持一次选择多个文件。

通过drag and drop接口选择文件

关于drag and drop接口可以查看HTML5 DragEvent。

第一步：创建一个放置区域。一个普通的元素，如p，p等。

第二步：给放置区添加drop，dragenter，dragover事件处理程序。其中起关键作用的是drop事件处理程序。

下面是一个显示缩略图的例子：

<p id=&#39;dropbox&#39; class=&#39;dropbox&#39;></p>
.dropbox{
 border:solid 3px red;
 height:400px;
 width:auto;      
}

var dropbox;
dropbox = document.getElementById("dropbox");
//注册事件处理程序
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}
function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}
function drop(e) {
  e.stopPropagation();
  e.preventDefault();
  var dt = e.dataTransfer;
  var files = dt.files;
  handleFiles(files);
}
function handleFiles(files) {
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var imageType = /^image\//;
    if (!imageType.test(file.type)) {
      continue;
    }
    var img = document.createElement("img");
    img.file = file;
    dropBox.appendChild(img); 
    var reader = new FileReader();
    reader.onload =  function() {
        img.src = reader.result; 
        };
    reader.readAsDataURL(file);
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

HTML5 ファイルインターフェイスを使用して Web ページでファイルのダウンロードを使用する方法

関連記事