ajaxFileUpload上傳帶參數文件及JS驗證文件大小
本代碼片段用於spring boot+hibernate，用maven構建
一：
ajaxFileUpload為了實現無刷新異步提交文件,構建 iframe 然後創建form表單 再將要上傳的文件寫上去再提交.但是原代碼 卻沒有處理data.所以這塊內容需要我們自己加上去. 下面紅色部分為修改ajaxFileUpload.js的三處地方:（對比源碼修改） 1.createUploadForm: function(id, fileElementId,data); 2.if (data) { for (var i in data) { $(‘<input type="hidden" name="‘ + i + ‘" value="‘ + data[i] + ‘" />‘).appendTo(form); } }3.var form = jQuery.createUploadForm(id, s.fileElementId,s.data);
html部分：
<form id="form1" runat="server" method="post" enctype="multipart/form-data">
<div>
<div class="_box">選擇圖片</div>
</div>
<div class="none">
<input type="file" name="fileID" id="fileID" />
</div>
</form>
二：
$.ajaxFileUpload({
url: ‘URL‘,
type: ‘post‘,
data : {
url : url
},
secureuri: false, //一般設置為false
fileElementId: ‘fileID‘, // 上傳文件的id、name屬性名
dataType: ‘JSON‘, //返回值類型，一般設置為json、application/json 這裏要用大寫 不然會取不到返回的數據
success: function(data, status){
alert(data);
},
error: function(data, status, e){
alert(e);
}
});
三：後臺讀取並保存到文件夾中 //保存目錄為 E:\saveIMG
@ResponseBody
@RequestMapping("/addandupload")
public String addandupload(@RequestParam(value="uploadIMG", required=false) MultipartFile file） {
String filename = file.getOriginalFilename();
String filepath = "E:\\saveIMG\\"; //文件上傳保存目錄
if (!file.isEmpty()) { //判斷是否有文件上傳
try {
byte[] bytes = file.getBytes();
BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(new File(filepath, filename)));
stream.write(bytes);
stream.close();
} catch (Exception e) {
e.printStackTrace();
}
}
頁面顯示多個服務器圖片：
一：
HTML頁面的IMG標簽中的src用
<img class="example-image" src="*{‘http://127.0.0.1:8080/foodmain/findimg?name=‘+food.foodimg}" alt="${food.foodname}" />
後端http://127.0.0.1:8080/foodmain/findimg?name?方法
@ResponseBody
@RequestMapping("/findimg")
public void findimg(HttpServletResponse response,String name) throws IOException{
File filePic = new File("E:\\saveIMG\\"+name);
if(filePic.exists()){
FileInputStream is = new FileInputStream(filePic);
int i = is.available(); // 得到文件大小
byte data[] = new byte[i];
is.read(data); // 讀數據
is.close();
response.setContentType("image/*"); // 設置返回的文件類型
OutputStream toClient = response.getOutputStream(); // 得到向客戶端輸出二進制數據的對象
toClient.write(data); // 輸出數據
toClient.close();
}
}
JS驗證上傳文件大小，參考：http://zhuchengzzcc.iteye.com/blog/1573360
ajaxFileUpload上傳帶參數文件及JS驗證文件大小