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);
　　　　　}        
    }