Front-end upload pictures, generally use the Web native input to call the album (file) of the mobile phone system or the camera to take pictures, the recent development encountered two pits

1. How do I control whether I can choose the mobile phone photo mode or select the file from the album/file?

Our requirements are simple, we only need to limit the type of photos uploaded, and we can use the phone to take photos and select from the album.

It’s actually controlled by the following three things

  1. type = ‘file’
  2. accept=”image/*”(mime)
  3. capture

Read MDN and then W3C carefully

As input= “type” is too system dependent, it will be more or less different on each system. Several w3c demos are also PC, not mobile.

At the beginning, the ideal is very rich, want to be in place in one step, directly by the system to judge.

<input type="file" accept="image/jpeg,image/jpg,image/png,application/pdf" onchange="change" capture="camera"/> 
Copy the code

In practice, however, ios works fine and Android may only take photos and not be able to select files from the file system. After trying the solution, we chose a compromise solution. We only need to make the following changes (no need to add Capture)

<input type="file" accept="image/*" onchange="change"/> //Copy the code

2. The size of the image displayed on iPhone and Android is different from that of file.size obtained in the change event.

When we use file.size to judge the image size, we will find that Android seems to have slight error, iPhone pictures larger than 3m will have error, even a picture of 7MB, file.size may be 3MB

Jsfiddle Test address

At that time, I did not find anything through repeated tests, but I suddenly realized that apple’s image format is HEIC image format, could it be related to this? Then I downloaded a 6MB JPG image from the Internet and sent it to iPhone for uploading, and found that the file. Size is normal 6MB, and solved the case.

The problem, in fact, is that the phone system calculates the size of the image differently

  1. I took a few Android and tried it out. Some of the images are based on 1000km = 1MB instead of 1024 KB = 1MB.
  2. For Apple, the heIC format is used by default when taking photos, and the system may convert and compress images when uploading

To ensure that the file size displayed during upload is consistent with the upper limit, you can set this parameter. IPhone Image Format

other

Has encountered a problem which didn’t solve, some old vivo phone, WeChat scan qr code into the page (or scan code into the page to manually refresh the browser), then calls the camera or gallery, click on the confirmation selection, WeChat directly out of the browser, but if not qr code to enter, but direct click on the link to enter, Wechat browser will not flash back, if you know the solution, please share the solution, thank you, progress together!