h5拉起手机摄像头拍照及选择图片并展示

1.html

<!--图片预览框 -->
<div style="height: 200px">
    <img src="" id="preview" style="width: auto;height: 100%">
</div>

<!-- 拍照-->
<input id="file1" type="file" accept="image/*" multiple capture="camera" onchange="show(1)"/>
<!-- 选图片 -->
<input id="file2" type="file" accept="image/*" mutiple onchange="show(2)">

 

2.js

　　/*拍照或选择图片后的回调*/
    function show(val) {
        //获取到file
        var file = $("#file" + val).get(0).files[0];
        var reader = new FileReader();
　　　　　reader.onload = function () {
　　　　　　$("#preview").attr("src",reader.result);
　　　　}
　　　　　if(file){
　　　　　　reader.readAsDataURL(file);
　　　　　}        
    }