内容详情 您现在的位置是: 首页> Js

使用jquery的ajax提交文件上传

发布时间:2021-02-19 18:27 已围观:1612

摘要使用jquery的ajax提交文件上传

<form id="infoLogoForm" enctype='multipart/form-data'>
   <div class="cnt-updateWrapper" style="display: none">
       <div>
           <div id="loadImg" class="cnt-img-content">
               <img id="logo" class="ctn-uploadImg" src="${ctx}/static/images/u8385.png" draggable="false">
               <div id="licenseBox" class="ctn-licence">
                  点击我上传图片
                   <input type="file" id="ctn-input-file" name="file" accept="image/*" style="height:40px">
               </div>
           </div>
       </div>
       <div>上传成功后,请点击保存后才能生效</div>
       <div>
           <button id="infoLogoSaveBt" class="btn btn-default cnt-save" type="button">保存</button>
       </div>
   </div>
</form>
var uploading = false;

$("#ctn-input-file").on("change", function(){
   if(uploading){
       alert("文件正在上传中,请稍候");
       return false;
  }
   $.ajax({
       url: ctx + "/xxx/upload",
       type: 'POST',
       cache: false,
       data: new FormData($('#infoLogoForm')[0]),
       processData: false,
       contentType: "application/x-www-form-urlencoded",
       dataType:"json",
       beforeSend: function(){
           uploading = true;
      },
       success : function(data) {
           if (data.code == 1) {
               $("#logo").attr("src", data.msg);
          } else {
               showError(data.msg);
          }
           uploading = false;
      }
  });
});



赞一个 (8)