h5-capture 使用和明细(input)

h5 的属性capture

1.由于h5项目中使用到了文件上传的功能,这里来写一下 html5的一个属性 capture 的使用。

2.直接使用 type= “file” 加上 accept=”image/*”就会默认调起系统的图片文件。

3.当你需要直接唤起相机的时候 capture=”camera”

4.需要支持多选的时候 multiple=”multiple”

<input type="file" id="camera" multiple="multiple" capture="camera" accept="image/*"><!--上传图片,手机调用相册和摄像头-->

调用前置摄像头

<form action="server.cgi" method="post" enctype="multipart/form-data"> <input type="file" name="image" accept="image/*" capture="user"> <input type="submit" value="Upload"></form>

调用后置摄像头

<form action="server.cgi" method="post" enctype="multipart/form-data"> <input type="file" name="video" accept="video/*" capture="environment"> <input type="submit" value="Upload"></form>

调用麦克风和摄像

<form action="server.cgi" method="post" enctype="multipart/form-data"> <input type="file" name="audio" accept="audio/*" capture> <input type="submit" value="Upload"></form>

处理上传文件-XMLHttpRequest

var input = document.querySelector('input[type=file]'); // see Example 4 input.onchange = function () { var file = input.files[0];  upload(file); drawOnCanvas(file); // see Example 6 displayAsImage(file); // see Example 7}; function upload(file) { var form = new FormData(), xhr = new XMLHttpRequest();  form.append('image', file); xhr.open('post', 'server.php', true); xhr.send(form);}

使用 fileReader 和 canvas

function drawOnCanvas(file) { var reader = new FileReader();  reader.onload = function (e) { var dataURL = e.target.result, c = document.querySelector('canvas'), // see Example 4 ctx = c.getContext('2d'), img = new Image();  img.onload = function() { c.width = img.width; c.height = img.height; ctx.drawImage(img, 0, 0); };  img.src = dataURL; };  reader.readAsDataURL(file);}

使用 createObjectURL()和图片处理

function displayAsImage(file) { var imgURL = URL.createObjectURL(file), img = document.createElement('img');  img.onload = function() { URL.revokeObjectURL(imgURL); };  img.src = imgURL; document.body.appendChild(img);}

h5-capture 使用和明细(input)》来自互联网,仅为收藏学习,如侵权请联系删除。本文URL:https://www.hashtobe.com/1012.html