How to use HTML5 File interface to use file download on web page

This article mainly introduces how to use the HTML5 File interface to download files on a web page. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

File interface provides Get information related to the file and run JavaScript on the web page to access the contents of the file. Next, this article will introduce you to the HTML5 File interface to use the file download function on the web page. Friends who need it can refer to the

File interface provides file-related information, and runs JavaScript to access files on the web page. content in.

The File object comes from the FileList object returned by the user using the input tag to select the file, and from the DataTransfer object of the drag-and-drop operation. A File object is a special type of Blob that can be used in any context where a Blob can be used.

To use files in web pages, the objects usually involved are: File object, FileList object, and FileReader object.

FileList object

FileList comes from two places, namely the files attribute of the input element and the drag and drop API (when dragging a file When, event.DataTransfer.files is a FileList object)

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

Standard properties of FileList objects

length: This is a read-only property. This property returns the length of the File object contained in the FileList object.

Standard methods of FileList objects

item(index): Get the File object at the specified position in the FileList object. It can be abbreviated in the form of an array index

File object

Every item in the FileList object is a File object. File object is a special kind of Blob.

Standard attributes of File object

1.lastModified: Returns the time when the file was modified, which is the time since January 1, 1970 The number of milliseconds that have elapsed since 0:00:00. Is a read-only attribute

2.name: Returns the file name of the file referenced by the file object. This is a read-only attribute

3.type: Returns the file type of the file referenced by the file object , is MINE type, this is a read-only attribute.

4.size: Returns the file size of the file referenced by the file object. This is a read-only attribute.

Standard methods of File object

There are no separate methods defined for the File object, but it has methods inherited from the Blob object.

FileReader Object

The FileReader object enables web applications to asynchronously read files on the user's computer.

FileReader() is a constructor through which a new FileReader object can be created.

var fileReader = new FileReader();

Standard properties of FileReader object

1.error: Return file read An error occurred during the retrieval process.

2.result: Returns the content of the file. The return value type is String or ArrayBuffer. This attribute is only valid after the read operation has completed.

3.readyState: Returns the current status of the reading operation. The possible values ​​are 0: reading has not started, 1: reading, 2: reading completed.

Standard methods of FileReader object

1.abort(): Abort the read operation. The value of readyState becomes 2.

2.readAsArrayBuffer(Blob): Read the specified Blob, such as a File object (File object is a special Blob). As soon as the reading is completed, the value of the readyState attribute will become 2, and the result attribute is an ArrayBuffer representing the file data.

3.readAsDataURL(Blob): Read the specified Blob, such as a File object (File object is a special Blob). As soon as the reading is completed, the value of the readyState attribute will become 2. The result attribute is a URL representing the file data, and the data format is a base64-encoded string

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

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

4.readAsText(Boob,encoding): Read the specified Blob, such as a File object (File object is a special Blob). As soon as the read is completed, the value of the readyState attribute will become 2, and the result attribute is a text string representing the file data. The second parameter is optional and is used to specify the encoding of the text string in the result attribute. The default is UTF-8.

FileReader object events

1.abort: Triggered when the read operation is terminated.

2.error: Triggered when an error is encountered during the read operation.

3.load: Triggered when the read operation completes successfully.

4.loadend: Triggered when the read operation ends. It cannot be a read success or a read failure.

5.loadStart: Triggered when the read operation starts.

6.process: Triggered during reading.

Using files in web applications

Using the file object in HTML5, you can access selected local files and read these files Content. File objects come either from the input element or from the drag and drop interface.

通过input元素选择文件

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

访问通过input选择的文件

var selectedFile = document.getElementById('input').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中postMessage API的基本使用

如何用HTML5操作WebSQL数据库

HTML5和jQuery实现搜索智能匹配的功能

The above is the detailed content of How to use HTML5 File interface to use file download on web page. For more information, please follow other related articles on the PHP Chinese website!