HTML5 calls the <input> method of mobile phone camera and photo album functions
Recently, I used the MUI framework to make a webapp project. On the basis of the PLUS environment, I can directly call the underlying API of the mobile phone to use the function of taking pictures or uploading from the album!
When I was looking up the information, I thought of another method of using input to call the camera and photo album functions. I didn't understand it in depth before. Now I will sort it out:
No special environment is required. Use the input tag type value as file to call the system's default camera, photo album, video camera, and recording functions. Code first:
<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">
accept indicates the open system file directory
capture represents the default device captured by the system, camera: camera; camcorder: video camera; microphone: recording;
There is also an attribute multiple, which supports multiple selection. When multiple selection is supported, multiple has a higher priority than capture, so just write it as: <input type="file" accept="image/*" multiple>, it can be in Test it on your phone. So how to get and display the selected picture?
html：（css）
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<div>
<img id="blah" src="#" alt="Show your uploaded items Image" />
</div>
</form>
js：
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
Adjust the style yourself so that you can display the photo you just took or the picture you selected from the album.