1. input上傳文件保存
input標(biāo)簽有個(gè)type為file，用于選擇上傳文件。在提交表單時(shí)需要注意enctype屬性設(shè)置為multipart/form-data。接收文件的后端可以通過(guò)request.FILES.get('file')來(lái)拿到上傳的文件對(duì)象。
2. input上傳文件第二次獲取不到
由于input的type為file，每次選擇完文件后會(huì)在網(wǎng)頁(yè)上留下緩存，因此如果用戶再次選擇同一個(gè)文件上傳，后端是獲取不到文件對(duì)象的。因此，需要在input標(biāo)簽中添加一個(gè)自定義的屬性，讓每次選擇文件時(shí)都能創(chuàng)建新的input標(biāo)簽。
3. input上傳文件夾
目前還沒(méi)有原生的input組件支持上傳文件夾，但是可以借助一些插件實(shí)現(xiàn)上傳文件夾的功能，比如WebUploader，F(xiàn)ine uploader等。
4. input上傳文件完成
上傳文件完成后，可以在前端根據(jù)后端返回的數(shù)據(jù)進(jìn)行提示。比如可以在頁(yè)面上顯示上傳成功或上傳失敗的狀態(tài)。
$.ajax({
url: '/upload/',
type: 'POST',
data: formdata,
processData: false,
contentType: false,
success: function(data) {
alert('上傳成功');
},
error: function(data) {
alert('上傳失敗');
}
});
5. input上傳文件修改按鈕名字
可以修改input上傳文件按鈕的名字，修改后的名字會(huì)顯示在選擇文件的按鈕上。
二、input多文件上傳
1. input多文件上傳
在input標(biāo)簽上添加multiple屬性，即可實(shí)現(xiàn)多文件上傳功能。
2. input上傳文件重復(fù)上傳失敗
由于每個(gè)上傳的文件都有唯一的文件名，因此如果上傳的文件名相同則會(huì)上傳失敗。可以在前端對(duì)文件名進(jìn)行處理，使其在后端不會(huì)重復(fù)。
3. input上傳文件時(shí)無(wú)法選擇文件
出現(xiàn)這種情況一般是因?yàn)闉g覽器禁止訪問(wèn)本地文件，可以嘗試更換瀏覽器或者檢查瀏覽器設(shè)置。
三、input上傳文件獲取文件上傳路徑
1. input上傳文件獲取文件上傳路徑
input上傳文件的path屬性是只讀的，無(wú)法通過(guò)JavaScript獲取。
2. input上傳文件怎么知道上傳完成
上傳文件完成后，后端會(huì)返回上傳文件的信息，前端可以根據(jù)這些信息判斷上傳是否成功。
$.ajax({
url: '/upload/',
type: 'POST',
data: formdata,
processData: false,
contentType: false,
success: function(data) {
if (data.code === 0) {
alert('上傳成功');
} else {
alert('上傳失敗');
}
},
error: function(data) {
alert('上傳失敗');
}
});
京公網(wǎng)安備 11010802030320號(hào)