Table of Contents
FileList object and file object
Blob object
How to create
Download files
FileReader object
Upload image preview
Data backup and recovery
Base64 encoding
Home Web Front-end H5 Tutorial Detailed introduction to file upload in H5

Detailed introduction to file upload in H5

Jul 17, 2017 am 11:06 AM
h5 html5

FileList object and file object

The input[type="file"] tag in HTML has a multiple attribute, which allows the user to select multiple files. The FileList object represents the list of files selected by the user. Each file in this list is a file object.

Attributes of the file object:

  • name: file name, excluding path.

  • type : File type. Files of image type will all start with image/, which can be used to restrict uploading to only images.

  • size : File size. Additional operations can be performed based on file size.

  • lastModified: The time when the file was last modified.

<input type="file" id="files" multiple><script>var elem = document.getElementById(&#39;files&#39;);elem.onchange = function (event) {var files = event.target.files;for (var i = 0; i < files.length; i++) {// 文件类型为 image 并且文件大小小于 200kbif(files[i].type.indexOf(&#39;image/&#39;) !== -1 && files[i].size < 204800){console.log(files[i].name);}}}</script>
Copy after login

There is an accept attribute in input, which can be used to specify the file types that can be submitted through file upload.

accept="image/*" can be used to limit only the image formats allowed to be uploaded. However, there was a slow response problem under the Webkit browser, and it took several seconds for the file selection box to pop up.

The solution is to change the * wildcard character to the specified MIME type.

<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png">
Copy after login

Blob object

The Blob object is equivalent to a container and can be used to store binary data. It has two attributes, the size attribute represents the byte length, and the type attribute represents the MIME type.

How to create

Blob objects can be created using the Blob() constructor.

var blob = new Blob([&#39;hello&#39;], {type:"text/plain"});
Copy after login

The first parameter in the Blob constructor is an array that can store ArrayBuffer objects, ArrayBufferView objects, Blob objects and strings.

Blob objects can return a new Blob object through the slice() method.

var newblob = blob.slice(0,5, {type:"text/plain"});
Copy after login

The slice() method takes three parameters, all of which are optional. The first parameter represents the starting position of the binary data in the Blob object to be copied, the second parameter represents the end position of the copy, and the third parameter is the MIME type of the Blob object.

canvas.toBlob() can also create Blob objects. toBlob() uses three parameters, the first is the callback function, the second is the image type, the default is image/png, and the third is the image quality, the value is between 0 and 1.

var canvas = document.getElementById(&#39;canvas&#39;);canvas.toBlob(function(blob){ console.log(blob); }, "image/jpeg", 0.5);
Copy after login

Download files

The Blod object can generate a network address through the window.URL object and combine it with the download attribute of the a tag to implement the file download function.

For example, download canvas as an image file.

var canvas = document.getElementById(&#39;canvas&#39;);canvas.toBlob(function(blob){
// 使用 createObjectURL 生成地址,格式为 blob:null/fd95b806-db11-4f98-b2ce-5eb16b38ba36var url = URL.createObjectURL(blob);var a = document.createElement(&#39;a&#39;);a.download = &#39;canvas&#39;;a.href = url;
// 模拟a标签点击进行下载a.click();
// 下载后告诉浏览器不再需要保持这个文件的引用了URL.revokeObjectURL(url);});
Copy after login

You can also save the string as a text file with a similar method.

FileReader object

The FileReader object is mainly used to read files into memory and read the data in the file. Create a FileReader object through the constructor

var reader = new FileReader();
Copy after login

The object has the following methods:

  • abort: abort the read operation.

  • readAsArrayBuffer: Read the file content into the ArrayBuffer object.

  • readAsBinaryString: Read the file as binary data.

  • readAsDataURL: Read the file as a string in data: URL format.

  • readAsText: Read the file as text.

Upload image preview

A common application is to display the image through readAsDataURL() after the client uploads the image.

<input type="file" id="files" accept="image/jpeg,image/jpg,image/png"><img src="blank.gif" id="preview"><script>var elem = document.getElementById(&#39;files&#39;),img = document.getElementById(&#39;preview&#39;);elem.onchange = function () {var files = elem.files,reader = new FileReader();if(files && files[0]){reader.onload = function (ev) {img.src = ev.target.result;}reader.readAsDataURL(files[0]);}}</script>
Copy after login

However, there is a bug when uploading photos when taking pictures vertically on some mobile phones, and you will find that the photos are upside down, including Samsung and iPhone. . . The solution will not be explained here. If you are interested, you can view: Solution for mobile image upload rotation and compression

Data backup and recovery

FileReader object's readAsText() can read the text of the file , combined with the function of Blob object downloading files, it is possible to back up the data export file to the local. When the data needs to be restored, upload the backup file through input, and use readAsText() to read the text and restore the data.

The code is similar to the above function. It will not be repeated here. For specific applications, please refer to: notepad

Base64 encoding

Added atob and btoa methods in HTML5 to support Base64 coding. Their names are also very simple, b to a and a to b, which represent encoding and decoding.

var a = "lin-xin.github.io";var b = btoa(a);var c = atob(b);console.log(a);     
// https://lin-xin.github.ioconsole.log(b);     
// aHR0cHM6Ly9saW4teGluLmdpdGh1Yi5pbw==console.log(c);     
// https://lin-xin.github.io
Copy after login

The btoa method encodes the string a, does not change the value of a, and returns an encoded value.
atob method decodes the encoded string.

But the parameter contains Chinese characters, which exceeds the character range of 8-bit ASCII encoding, and the browser will report an error. Therefore, the Chinese needs to be encoded with encodeURIComponent first.

var a = "哈喽 世界";var b = btoa(encodeURIComponent(a));var c = decodeURIComponent(atob(b));console.log(b);     
// JUU1JTkzJTg4JUU1JTk2JUJEJTIwJUU0JUI4JTk2JUU3JTk1JThDconsole.log(c);     
// 哈喽 世界
Copy after login

The above is the detailed content of Detailed introduction to file upload in H5. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Table Border in HTML Table Border in HTML Sep 04, 2024 pm 04:49 PM

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

Nested Table in HTML Nested Table in HTML Sep 04, 2024 pm 04:49 PM

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

HTML margin-left HTML margin-left Sep 04, 2024 pm 04:48 PM

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

HTML Table Layout HTML Table Layout Sep 04, 2024 pm 04:54 PM

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

Moving Text in HTML Moving Text in HTML Sep 04, 2024 pm 04:45 PM

Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

HTML Ordered List HTML Ordered List Sep 04, 2024 pm 04:43 PM

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

HTML onclick Button HTML onclick Button Sep 04, 2024 pm 04:49 PM

Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.

HTML Input Placeholder HTML Input Placeholder Sep 04, 2024 pm 04:54 PM

Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.

See all articles