通過formdata ajax上傳圖片 以及後臺接收formdata資料 mvc
最近一直研究如何通過ajax上傳圖片看了好對用formdata來實現 但是關於springmvc後臺如何接收formdata的資料一直沒有介紹 今天把後臺接收資料也寫下來了 。
有點不完整 但是是能夠實現的 相信有能看懂的 大家見諒 帶有顏色的標記注意一下
<form class="inpform" id="uploadForm" enctype="multipart/form-data">
<div class="f-inp">
<div> <i>診所名稱:</i>
<input type="text" name="name
</div>
<div> <i>診所地址:</i>
<input type="text" name="addrInfo" id="addrInfo" >
</div>
<h4>Logo</h4>
<input type="file" id="file
</div>
</form>
<input type="button" value="提交" onclick="add();">
js如下
function add(){
var formData = new FormData($("#uploadForm")[0]);//用form 表單直接 構造formData 物件; 就不需要下面的append 方法來為表單進行賦值了。
$.ajax({
async: false,//要求同步 不是不需看你的需求
url : "app/gexingSet.htmls",
type : 'POST',
data : formData,
processData : false, //必須false才會避開jQuery對 formdata 的預設處理
contentType : false, //必須false才會自動加上正確的Content-Type
success : function(result) {
if(result==1){
forward=true;
}else{
$(".myModal-click").trigger("click");
forward=false;
}
},
error : function(result) {
$(".myModal-click").trigger("click");
forward=false;
}
});
}
spring mvc 處
@Controller
@RequestMapping("/app")
public class ClinicController {
@ResponseBody
@RequestMapping("gexingSet.htmls")
public int gexingSet1(
@RequestParam(value = "file", required = false)MultipartFile file,
String name, String
addrInfo, HttpServletRequest request) { //name和addrinfo是表單提交的資料 因為檔案上傳有可能帶有其他引數 但是名字要與表單裡的名字一樣
String fileName = file.getOriginalFilename(); //獲取檔名
if (!file.isEmpty()) {
String path = “”;//寫你的路徑 這裡不寫了
File targetFile1 = new File(path, fileName);
OutputStream out;
InputStream in;
try {
byte[] buf = file.getBytes();//檔案二進位制
while ((length = in.read(buf)) != -1) {
out.write(buf, 0, length);
}
out.flush();
in.close();
out.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}