图片上传（前端）

方式一：

 jsp代码：
 <div class="inputItem" style="justify-content: flex-start;padding-left: 44px;">
      <div class="inputName">人脸采集</div>
       <img id="userImage1" onclick="uploadFace1();" src="" alt="默认图片" style="height: 60px;width: 60px;">
 </div>
 
 <form id="addMultiDeviceFm" hidden class="form-horizontal">
   <div class="form-group">
     <label for="file" class="col-sm-4 control-label">上传文件：</label>
     <div class="col-sm-5">
       <div class="input-group">
         <input type="file" id="file" name="file" accept="image/bmp,image/png,image/jpg" onchange="MutilInput(this)">
       </div>
     </div>
   </div>
 </form>
 
 js代码：
 function uploadFace1() {
   $("#file").click();
 }
 
 function MutilInput(a) {
   var fileSize = "";
   var fileMaxSize = 1024;//1M
   if (a.files.length == 0) {
     return;
   } else {
     fileSize =a.files[0].size;
     var size = fileSize / 1024;
     if (size > fileMaxSize) {
       alertMsg(2, "文件大小不能大于1兆");
       a.value = "";
       return false;
   }

   var form = new FormData(document.getElementById("addMultiDeviceFm"));
   $.ajax({
     type: "post",
     url: "",//文件上传的路径地址
     data: form,
     processData: false,
     contentType: false,
     beforeSend: function () {
       showLoader()
     },
     success: function (data) {
       hideLoader();
       var json = data;
       if (json.flag) {
         alertMsg(1, "图片上传成功");
         //$("#userImage").css("height", "167px");//记得改id
         //$(".upload-pic-ope").css("display", "flex");
         $('#userImage').attr("src", json.url);
         picName = json.fileName;
         picUrl = json.url;
       } else {
         alertMsg(3, json.msg);
       }
     },
     error: function (e) {
       hideLoader();
       alertMsg(3, "上传失败");
     }
   });
   }
 }

当点击默认图片时，调用uploadFace1函数来触发form表单中的文件框，文件框发生改变时调用onchange事件MutilInput，当图片的格式和大小满足要求时调用接口上传图片

方式二（插件）：

 jQuery.form.js
 参考：https://www.cnblogs.com/qlqwjy/p/7831927.html