SSM+Ajax 實現上傳實例(包含文件和其他屬性)

**********************************
提交文件類的
@RequestMapping(value = "/uploadFileAjax")
@ResponseBody
public Model uploadFiles(@ModelAttribute("CFlie") CFile cFile, Model model) {
try {
System.out.println("===="+cFile.getFileName());
for (int i = 0 ;i<cFile.getFile().length;i++){
String filePath = request.getSession().getServletContext().getRealPath("/") + "/upload/" + cFile.getFile()[i].getOriginalFilename();
cFile.getFile()[i].transferTo(new File(filePath));
}

} catch (Exception e) {

}
return model;
}


**********************************
提交對象
public class CFile {
private String fileName;
private MultipartFile[] file;

public String getFileName() {
return fileName;
}

public void setFileName(String fileName) {
this.fileName = fileName;
}

public MultipartFile[] getFile() {
return file;
}

public void setFile(MultipartFile[] file) {
this.file = file;
}
}
***********************************
表單(引用bootstrap)
<form action="/uploadFileAjax" method="post" enctype="multipart/form-data" id="uploadFileForm" modelAttribute="CFile" >
<div class="box-body">
<div class="row ">
<div id="message" class="success">${message}</div>
<h5 class="box-info col-xs-2" style="width:8%">文檔:</h5>

<input type="text" name="fileName" style="width:20%" class="form-control col-xs-2"/>
<input type="file" name="file" style="width:20%" class="form-control col-xs-2"/>
<input type="file" name="file" style="width:20%" class="form-control col-xs-2"/>
<input type="button" onclick="uploadFile()" class="btn-primary"
style="margin-top: 10px ;margin-left: 20px" value="上傳文件">
</div>
</div>
</form>
*************************************
ajax
function uploadFile() {
alert("ajax upload file")
var formData = new FormData($("#uploadFileForm")[0]);
$.ajax({
type: "POST",
url: "/uploadFileAjax",
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (data) {

}
}
);

}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章