h5拍照 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>拍照</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
  <style>
    .upload-label{
      display: inline-block;
      height: 50px;
      width: 50px;
      line-height: 50px;
      text-align: center;
      background-color: #ccc;
      border: 1px solid #555;
    }
  </style>
</head>
<body>
<form id="uploadForm">
  <div class="photograph">
    <label class="upload-label" for="upload">拍照</label>
    <ul class="photographName"></ul>
  </div>
</form>
   <script>
     /*处理安卓和ios的兼容性*/
     var upload = '';
     var ua = navigator.userAgent.toLowerCase();
     if (/iphone|ipad|ipod/.test(ua)) {
       upload = `<input type='file' id='upload' name="idcard" form="uploadForm" accept='image/*' multiple='multiple' style="display: none">`;
     } else if (/android/.test(ua)) {
       upload = `<input type='file' id='upload' name="idcard" form="uploadForm" accept='image/*'  capture='camera' multiple='multiple' style="display: none">`
     }else{
       upload = `<input type='file' id='upload' name="idcard" form="uploadForm" accept='image/*' capture='camera' multiple='multiple' style="display: none">`
     }
     $('.photograph').append(upload);


     /*拍照事件*/
     $("body").delegate("#upload", "change", function () {
       var _this = this;
       var file = this.files;
       for (var i = 0; i < 1; i++) {
         reads1(file[i], _this);
       }
     });
     function reads1(file, _this) {
       var img = '';
       var url = URL.createObjectURL(file);
       var reader = new FileReader();
       reader.readAsDataURL(file);
       reader.onload = function () {
       };
       img += `<li><img src=${url} alt=""><i class="close"></li>`;
       $('.photographName').append(img)

     }

    /*上传照片*/
     function uploadForm() {
       var uploadPath = '';
       var formData = new FormData($("#uploadForm")[0]);
       $.ajax({
         url:"url",
         type: 'POST',
         data: formData,
         async: false,
         cache: false,
         contentType: false,
         processData: false,
         success: function (data) {
         },
         error: function () {
         }
       });
     }
   </script>
</body>
</html>

 

posted @ 2019-05-05 17:36  (⊙o⊙)买噶  阅读(211)  评论(0)    收藏  举报