前端頁面上實現表單提交檔案上傳功能
提示:新手剛剛初學java,希望和大家多多交流
前言
在頁面上實現檔案的上傳功能
一、檔案上傳的三要素是什麼?
檔案上傳的三要素:
1.表單post請求
2.input框的type=file
3.在form表單中新增enctype=“multipart/form-data”
二、具體使用步驟
1.前端頁面程式碼
程式碼如下(示例):
<form action="/" method="post"
class="form-horizontal" id="saveForm"
enctype="multipart/form-data">
<div class="form-group row">
<label for="title" class="control-label col-md-2">圖片上傳</label>
<div class="col-md-10">
<input class="form-group" name="photo" type="file" />
</div>
</div>
<div class="form-group row">
<label for="title" class="control-label col-md-2">視訊上傳</label>
<div class="col-md-10">
<input class="form-group" name="media" type="file" />
</div>
</div>
</form>
input框中的type屬性等於file
form表單必須是post請求
form表單必須新增enctype=“multipart/form-data”
2.後臺程式碼接收
程式碼如下(示例):
@RequestMapping("/")
@ResponseBody
public AjaxResult save(Vedio vedio, HttpServletRequest request, MultipartFile photo,MultipartFile media) {
// System.out.println(article);
System.out.println(vedio);
try {
service.save(vedio, request, photo,media);
return new AjaxResult();
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
return new AjaxResult(false, "操作失敗");
}
}
這裡需要注意的是,這裡方法引數必須使用MultipartFile型別 引數名必須和前端頁面中input框的name屬性值一致
3.在springMVC的配置檔案中新增檔案上傳解析器
<!-- 檔案上傳配置 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!--
defaultEncoding:請求的編碼格式必須和使用者JSP的編碼一致,以便正確讀取表單中的內容。
uploadTempDir:檔案上傳過程中的臨時目錄,上傳完成後,臨時檔案會自動刪除
maxUploadSize:設定檔案上傳大小上限(單位為位元組)-1為無限制
-->
<property name="defaultEncoding" value="UTF-8" />
<property name="maxUploadSize" value="102400000" />
<!-- uploadTempDir可以不做設定,有預設的路徑,上傳完畢會臨時檔案會自動被清理掉 -->
<property name="uploadTempDir" value="/upload/"></property>
</bean>
4.在服務層實現對檔案的上傳功能的封裝
public static void gofile(HttpServletRequest request,MultipartFile mFile,Vedio vedio,String p){
// 獲取檔案存放的絕對路徑
String path = request.getServletContext().getRealPath(p);
if (mFile!=null) {
// System.out.println(path);
// 判斷該資料夾是否存在
File file = new File(path);
if (!file.exists()) {
//建立資料夾
file.mkdir();
}
// 獲取需要上傳檔案的檔名
String originalFilename = mFile.getOriginalFilename();
// System.out.println(originalFilename);
// 只需要擷取改檔名的字尾
String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
// System.out.println(suffix);
// 生產新的檔名字
long currentTimeMillis = System.currentTimeMillis();
String fileName = currentTimeMillis + "" + suffix;
// 建立輸入輸出流
InputStream in = null;
try {
in = mFile.getInputStream();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
FileOutputStream out = null;
try {
out = new FileOutputStream(new File(path, fileName));
} catch (FileNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
// 檔案拷貝
try {
IOUtils.copy(in, out);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
// 關流
try {
in.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} finally {
try {
out.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
}
總結
注意:
本文僅僅簡單介紹了檔案的上傳功能在SSM框架中的使用,使用檔案上傳下載功能需要在SpringMVC配置檔案中配置檔案上傳解析器
在前端表單中需要post請求 ,新增enctype="multipart/form-data"屬性
在後端使用MultipartFile 型別 引數名必須和前端中的input中的name屬性值一致。
最後,希望有幫助到你!願你學習愉快!
相關文章
- 用phpmailer實現網頁表單提交傳送郵件功能PHPAI網頁
- SpringMvc上傳圖片及表單提交(單檔案+實體類引數提交)SpringMVC
- Vue實現多檔案上傳功能(前端 + 後端程式碼)Vue前端後端
- PHP實現單檔案、多檔案上傳 封裝 物件導向實現檔案上傳PHP封裝物件
- 自定義檔案上傳功能實現方法
- 【node】檔案上傳功能簡易實現
- SpringBoot實現檔案上傳功能詳解Spring Boot
- 使用Spring Boot實現檔案上傳功能Spring Boot
- C# exe上傳檔案和提交表單資料的方法C#
- js表單檔案提交JS
- 前端實現檔案下載和拖拽上傳前端
- post 表單大檔案上傳
- ajax實現檔案上傳
- SpringCloudGateway閘道器服務實現檔案上傳功能SpringGCCloudGateway
- 教你如何實現c#檔案上傳下載功能C#
- .net web core 如何編碼實現檔案上傳功能Web
- 網站開發之MyEclipse簡單實現JSP網頁表單提交及傳遞值網站EclipseJS網頁
- 前端大檔案上傳/分片上傳前端
- 單個檔案上傳和批量檔案上傳
- el-upload上傳檔案和表單一起提交+後端接收程式碼後端
- 檔案上傳原理和實現
- 使用Spring實現上傳檔案Spring
- Spring mvc檔案上傳實現SpringMVC
- HttpFileCollection 實現多檔案上傳HTTP
- 通過配置檔案(.htaccess)實現檔案上傳
- 使用java的MultipartFile實現layui官網檔案上傳實現全部示例,java檔案上傳JavaUI
- js實現帶上傳進度的檔案上傳JS
- 關於node實現檔案上傳
- PHP實現圖片(檔案)上傳PHP
- Feign實現檔案上傳下載
- Java檔案上傳如何實現呢?Java
- SpringMVC多個檔案上傳實現SpringMVC
- Spring MVC 檔案上傳、Restful、表單校驗框架SpringMVCREST框架
- 使用nodejs+express完成簡單的檔案上傳功能NodeJSExpress
- golang實現檔案上傳並轉存資料庫功能詳解Golang資料庫
- 前端-檔案上傳核心思想前端
- Linux如何實現斷點續傳檔案功能?Linux斷點
- SpringBoot專案實現檔案上傳和郵件傳送Spring Boot