Detailed introduction to file upload in H5
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('files');elem.onchange = function (event) {var files = event.target.files;for (var i = 0; i < files.length; i++) {// 文件类型为 image 并且文件大小小于 200kbif(files[i].type.indexOf('image/') !== -1 && files[i].size < 204800){console.log(files[i].name);}}}</script>
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">
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(['hello'], {type:"text/plain"});
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"});
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('canvas');canvas.toBlob(function(blob){ console.log(blob); }, "image/jpeg", 0.5);
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('canvas');canvas.toBlob(function(blob){ // 使用 createObjectURL 生成地址,格式为 blob:null/fd95b806-db11-4f98-b2ce-5eb16b38ba36var url = URL.createObjectURL(blob);var a = document.createElement('a');a.download = 'canvas';a.href = url; // 模拟a标签点击进行下载a.click(); // 下载后告诉浏览器不再需要保持这个文件的引用了URL.revokeObjectURL(url);});
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();
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('files'),img = document.getElementById('preview');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>
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
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); // 哈喽 世界
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

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

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.

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

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

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

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

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

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