input type="file 將圖片傳給後臺

今天需要做一個移動端的調查問卷,不止要提交標題,還需要提交配圖。(黑人問號臉.jpg)

此時,對於一個菜雞,無疑把我給難住了,問完度娘後選擇使用new FormData()方法。

直接正片吧:

<a class="file">
  <form enctype="multipart/form-data">
    <input type="file" id="imgFile" name="files" accept="image/jpg,image/jpeg,image/png,image/PNG" />
  </form>
</a>

var formFile = new FormData();

$('.file').change(function(){

  var imgfile = document.querySelector('#imgFile');//獲取input
  var file = imgfile.files[0]; //獲取文件對象
  formFile.append("uploadFile", file); //加入文件對象
})

// 在其他函數內把其他的參數也添加進去,這裏就舉個栗子吧 ps:查看指定內容 formFile.get('sharereport.title') 刪除指定內容 formFile.delete('sharereport.title')

formFile.append("sharereport.describes",sharereport.describes);
formFile.append("sharereport.username",sharereport.username);
formFile.append("sharereport.phones",sharereport.phones);
formFile.append("sharereport.title",sharereport.title);

//傳給後臺

$.ajax({
  type:"post",
  url:"",
  data:formFile,

  //是否預處理,默認值爲true,這裏改成false
  processData:false,

  //是否設置內容,默認值爲true,這裏改成false
  contentType:false,
  success:function(res){
    alert('提交成功');
  },
  error:function(data){
    alert('提交失敗');
  }
});

提交成功,數據成功傳給後臺

注意:提交後這些數據還保留在formFile裏面。如果用戶再操作就會有把原來的數據也發送出去,此時可以在alert()後formFile = new FormData();或者跳轉頁面以及關閉頁面。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章