描述: input上传多张照片, 专程base64格式上传

    1. // html
    2. <div>
    3.     <input id="file_input" type="file" onchange="previewImage(this, 'img_preview')" multiple>
    4.   <button onclick="upload">上传</button>
    5. </div>
    6. <div id="img_preview"></div>
    8. // js
    9. <script src="zepto.min.js"></script>
    10. <script>
    11.     var images = [];
    12.     var uploaded = [];
    13.     var upload_phase;
    15. // 图片转base64
    16.     function previewImage(el, previewId) {
    17.       images = [];
    18.     // 页面放图片的div
    19.     var preview = $('#'+previewId)
    20.     preview.empty()
    22.     function readAndPreview(file) {
    23.         if(/\.(jpe?g|png|gif)$/i.test(file.name)) {
    24.           var reader = new FileReader()
    25.         reader.addEventListener("load", function(){
    26.             var image = new Image();
    27.           image.height = 100l
    28.           image.title = file.name;
    29.           image.src = this.result;
    30.           // 多张图片放进数组中
    31.           images.push(this.result);
    32.           preview.append($(image).addclass("img-view"))
    33.         }, false)
    35.         reader.readAsDataURL(file)
    36.       })
    37.     }
    39.     if(el.files){
    40.         [].forEach.call(el.files, readAndPreview)
    41.     }
    42.   }
    44. // 上传图片
    45. function upload(phase){
    46.     uploaded = []
    47.   if($("file_input")[0].files[0] == undefined){
    48.       alert('INPUT EMPTY')
    49.     return;
    50.   }
    51.   [].forEach.call(images, (image) => {
    52.       var formData = new FormData()
    53.     formData.append("base64Image", image)
    55.     var url = "https://b612-fs.snowcam.cn/v1/event/vision/face/upload-only";
    56.     $.ajax({
    57.       type: "POST",
    58.       url: url,
    59.       data: formData,
    60.       dataType: "text",
    61.       processData: false,
    62.       contentType: false,
    63.       headers: {Accept: "*/*"},
    64.       timeout: 30 * 60 * 60 * 1000,
    65.       success: function (response) {
    66.         // success
    67.       },
    68.       error: function (e) {
    69.         console.log("ERROR : " + e.responseText);
    70.       }
    71.     });
    72.   })
    73. }
    74. </script>