解決問題：如何用ajax上傳圖片文件

1：先說我們平時接觸到的接口都是后臺需要你給他傳遞幾個參數(shù)，你就把參數(shù)對應的值 給他們就行了

上面的這個截圖就是我們最常用的接口形式；

2.當你給后臺傳圖片時，你傳的是一個文件 而不再是普通的string類型的值。而是file類型 也就是文件類型

我這里說的是用ajax實現(xiàn)的圖片上傳

1.在ajax中加上processData : false,
2.在ajax中加上contentType : false,
3.在ajax中加上async:false,

4.主要是改變ajax中的data這個屬性：看代碼

//js代碼<script type="text/javascript">function upload1() {$('#thumb').click();// $("#thumb").unbind().change() 防止change事件多次調(diào)用接口$("#thumb").unbind().change( function() {console.log( $("#thumb").val()) //虛擬路徑C:\fakepath\upload.png//console.log( $("#thumb").files[0])var formData =new FormData(); //新建表單元素formData.append('file',$('#thumb')[0].files[0]); //添加上傳文件變量，獲得文件真實信息，解決虛擬路徑console.log( document.getElementById("thumb").files[0])$.ajax({type:'POST',url:'{:url("Upload/Upload12")}',data:formData,processData: false, // 告訴jQuery不要去處理發(fā)送的數(shù)據(jù)contentType: false, // 告訴jQuery不要去設(shè)置Content-Type請求頭async:false,success:function(res){if(res.code == 2) {$('#img1').attr('src',res.src)$('#imgbox1').css('display','inline-block');$('#add1').css('display','none');$('#imgbox1').append('<input type="hidden" name="thumb" value="'+ res.id +'">');alert("上傳成功！");$("#thumb").val(''); //清空文件輸入框里的數(shù)據(jù)，解決選擇相同文件名文件change不起作用} else {alert("上傳失敗！");}}})//return false});}

針對于change事件上傳文件調(diào)用多次接口問題
在每次調(diào)用change事件之前先解綁在加事件即可

unbind() 解綁

$(that).children('input').unbind().change(function () {})

解決選擇相同文件名文件change不起作用

在change事件中的最后將本次的value置空。

uploadChange() {let files = this.$refs["upload"].files[0];this.flieData = files...if (!validImage(files, 2)) {// 防止第二次傳同圖片，不觸發(fā)uploadChange,將上傳文件里的值清空this.$refs["upload"].value = ''return}}

總結(jié)

以上是生活随笔為你收集整理的通过ajax单独上传图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。