Very simple method in the mobile terminal upload pictures, use HTML5 in input: file for file uploads.
"A" common property values:
1, the Accept : specified file type to upload files submitted, this can only attribute and type: file used in conjunction with
such as:
<the INPUT of the type = "File" name = "PIC" the above mentioned id = "PIC" the Accept = "Image / GIF, Image / jpeg" /> // here provides only accept GIF and JPEG images
If the image format is not limited, and can be written as follows:
<the INPUT of the type = "File" the Accept = "Image / *" Capture = "Camera"> // But in fact, should avoid the use of the property, should be uploaded on the server side validation file
2, Multiple : multiple file uploads
<input id="fileId2" type="file" multiple="multiple" name="file" />
"Two" upload pictures, video, audio method
<input type="file" accept="image/*" capture="camera"> // 调取图片 <input type="file" accept="video/*" capture="camcorder"> // 调取视频 <input type="file" accept="audio/*" capture="microphone"> // 调取音频
When used to upload files or images, IOS and Android to show a little differently, multi-environment tests are as follows:
Andrews:
[Micro letter]: There capture, adjusting the camera; no capture, transfer together photo albums camera
[QQ]: There captrue, tune together photo albums camera; no capture, transfer album
[browser]: There capture, adjusting the camera; no capture, photo albums camera tune together
IOS：
[Micro letter]: There capture, adjusting the camera; no capture, transfer album cameras together
[QQ]: There capture, adjusting the camera; no capture, transfer together photo albums camera
[browser]: There capture, adjusting the camera; no capture, photo albums camera tune together
We can see above, IOS consistent performance, without capture properties when the album will be called and the camera at the same time.
So if you want in any environment while calling the album and the camera, only need to determine whether the Android mobile device environment and is in QQ in the actual development process, then you can manually add capture properties.
So, how to judge it by js?
"Three" js determine whether the current page is Android or IOS, is a micro-channel environment, QQ environment, etc.
Reference article: by js distinguish mobile terminal browser , js judge the current page in the client ... QQ , mobile end how to determine the current device ...
[See article]
H5 (mobile terminal) front-end input type = file upload pictures, calling camera and photo albums
HTML5's input: file upload type control