图片上传(前端)

  • 方式一:

     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