解決問(wèn)題：如何用ajax上傳圖片文件

1：先說(shuō)我們平時(shí)接觸到的接口都是后臺(tái)需要你給他傳遞幾個(gè)參數(shù)，你就把參數(shù)對(duì)應(yīng)的值 給他們就行了

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

2.當(dāng)你給后臺(tái)傳圖片時(shí)，你傳的是一個(gè)文件 而不再是普通的string類(lèi)型的值。而是file類(lèi)型 也就是文件類(lèi)型

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

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

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

//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]); //添加上傳文件變量，獲得文件真實(shí)信息，解決虛擬路徑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請(qǐng)求頭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});}

針對(duì)于change事件上傳文件調(diào)用多次接口問(wèn)題
在每次調(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单独上传图片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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