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

代码2020-07-16452 人已阅来源:网络

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

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)">

js:

<script>
  /*拍照或选择图片后的回调*/
  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);
    }
  }
</script>