您的当前位置:首页正文

h5 input 调用摄像头或者相册

来源:化拓教育网

使用input标签 type值为file,可以调用系统默认的照相机、相册、摄像机、录音功能。

<input type="file" accept="image/" capture="camera">
<input type="file" accept="video/
" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">

accept表示打开的系统文件目录
capture表示的是系统所捕获的默认设备,camera:照相机;camcorder:摄像机;microphone:录音;
其中还有一个属性multiple,支持多选,当支持多选时,multiple优先级高于capture,所以只用写成:<input type="file" accept="image/*" multiple>就可.

$('.select-camera').on('click',function(){});

function uploadImg() {
$('.select-camera').on('change', function(e) {
$.showLoading("图片上传中...");
var eachPicId = createProcessId(5);
var that = $(this);
$(this).attr("id","file" + eachPicId);
var files = e.target.files;
for(var i = 0, f; f = files[i]; i++) {

            if(!f.type.match("image.*")) {
                $.hideLoading();
                $.alert("只能上传图片类型","提示")
                continue;
            }
            var fileValue = that.val();
            if(!/\.(gif|jpg|png|GIF|JPG|PNG)$/.test(fileValue)){
                $.hideLoading();
                $.alert("图片类型必须是jpg/gif/png中的一种","提示")
                continue;
            }
            var reader =  new FileReader();   //将文件读取为 DataURL
            reader.readAsDataURL(f);
            reader.onload = (function() {                   //读取完成后执行的事件
                return function(e) {
                    var changeimg = e.target.result;
                    var str = '<div  data-fileId="" class="upload-photo">![](' + changeimg + ')<div class="icon-pic-to"><div class="pic-icon-to"></div></div></div>'
                    $('.upload-photo-area').html(str);
                    $('.upload-photo-area').show();
                    removePic();
                    showLargeImg();
                    $('.make-call-btn').attr('pic-id', eachPicId);
                };
            })(f);
            setTimeout(function() {
                $("icon-pic-to").on("click",function() {
                    $(this).parent().remove();
                })
            },1000);
        }
    });

}