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

 

 

 

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

上一篇:HTML5移动端自适应解决方案


下一篇:cube-ui 重构饿了吗Webapp的 scroll-nav域名插槽问题