How to make image upload preview component in H5-JS Tutorial-php.cn

This time I will show you how to make an image upload preview component in H5. What are theprecautionsfor 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

    
  单选: 多选:

Copy after login

2 .Get the file object

Open the browser console and select the file to see the console changes

    
  可以这样:  也可以这样:  还可以这样:

Copy after login

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

   Document

Copy after login

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

    
  过滤出图片

Copy after login

5. Preview example

Preview is implemented by dynamically creating img tags and binding ObjectURL to the src attribute of img tags
Example

    
  预览

Copy after login

6. Single image upload preview example

Example

    
  简单预览示例

Copy after login

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!