最近做到文件上傳，用的是bootstrap fileinput上傳組件，一般做文件上傳我們有兩種方式。

1：先上傳文件，獲取文件的回顯值后賦值給form表單的字段文件屬性，然后上傳form表單。

2：form表單和文件一起提交。

考慮到第一種不太優(yōu)雅，會提高代碼的復(fù)雜性，故此選擇第二種方式:form表單和文件一起提交。
過程如下

1：引入bootstrap fileinput 相關(guān)js，css

2：form表單插入file框

3：js內(nèi)聲明文件上傳組件

$("#fileinput").fileinput({'theme': 'explorer-fas',maxFileSize: 1024000, //最大允許上傳限制//隱藏uploadUrl屬性，相當(dāng)于是普通文件控件，從而達到和form表單的效果// uploadUrl: prefix + "/uploadRefundFile",overwriteInitial: false,initialPreviewAsData: true,uploadAsync:true,showUpload: false,showClose: false,initialPreview: [],allowedFileExtensions: ["pdf",'jpg', 'png', 'gif','jpeg'],elCaptionText: ['只允許上傳pdf/圖片類型文件'],minFileCount: 1, //最少上傳maxFileCount: 9, //最多上傳layoutTemplates:{actionUpload:'' ,//去除上傳預(yù)覽縮略圖中的上傳圖片},previewFileIconSettings: {'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',// 'doc': '<i class="fa fa-file-word-o text-primary"></i>',// 'docx': '<i class="fa fa-file-word-o text-primary"></i>',// 'xlsx': '<i class="fa fa-file-excel-o text-success"></i>',// 'pptx': '<i class="fa fa-file-powerpoint-o text-danger"></i>',} }) 說明： 獲取上傳文件的數(shù)量 var fileLength = $('#fileinput').fileinput('getFilesCount');

4：ajax進行form表單處理

5：后端利用httpservletrequest 獲取文件

整個流程下來，相比第一種方式邏輯更加簡單，減少代碼量。

若是對于如何通過HttpServletRequest如何獲取文件信息進行上傳，可以到這里下載:
解析form表單同步上傳的文件信息獲取文件流

總結(jié)

以上是生活随笔為你收集整理的bootstrap fileinput上传组件和form表单一起提交的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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