How to make image upload preview component in H5
This time I will show you how to make an image upload preview component in H5. What are the precautions for making an image upload preview component in H5? The following is a practical case, let’s take a look.
My development environment is Windows 10 and the test browsers are Chrome and Firefox
If you encounter incompatible browsers, you can try to upgrade the browser or Google it (~ ̄▽ ̄)~
1 .Single selection and multiple selection of files
By default, belongs to single selection. Adding the multiple attribute allows multiple selection of files
1 2 3 4 5 6 7 8 9 |
|
2 .Get the file object
Open the browser console and select the file to see the console changes
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
3. Common attributes
In the second step, we have already looked in the console When we get to the file, let’s expand it and see what common attributes there are.
Common attribute description:
name-file name
size-size
type-file type
lastModified-last Modification date
Come on, let’s try to output some information to the page
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
4. Limit file size and file format
When it comes to uploading previews of images, it is not allowed The size and format of uploaded files will not be filtered.
Assume that we only allow jpg and png to be uploaded and the file size is within 2mb. It is very simple and only the file information can be judged.
If you don’t know the file you want to filter Type You can check the file type in the console and then copy and paste
Of course you can also set accept="image/*" in the input tag to only allow the input of image files
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
5. Preview example
Preview is implemented by dynamically creating img tags and binding ObjectURL to the src attribute of img tags
Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
6. Single image upload preview example
Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related reading:
How to use s-xlsx to import and export Excel files
How to use JavaScript to save text data
File upload extension made with jQuery
The above is the detailed content of How to make image upload preview component 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

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

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 HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.

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 Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.
