前端页面:
<form id="postUrlForm"method="post" action='<c:url value="/license/create"/>' class="pageForm required-validate" onsubmit="" enctype="multipart/form-data">
<div id="add" class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">请输入license信息,录制直播及标准终端不需要的,填写数字0</h4>
</div>
<div style="padding: 10px 100px 1px;">
<div class="input-group">
<span class="input-group-addon">项目名称:</span>
<input id="projectName" type="text" class="form-control" >
</div>
<br>
<div class="input-group">
<span class="input-group-addon">创建者:</span>
<input id="author" type="text" class="form-control" >
</div>
<br>
<div class="input-group">
<span class="input-group-addon">备注:</span>
<input id="description" type="text" class="form-control" >
</div>
<br>
<!--上传文件 -->
<div class="input-group">
<span class="input-group-addon">文件上传:</span>
<input id="file" type="file" name="file" class="btn btn-default">
</div>
<br>
</div><!-- style input group-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="save()">保存信息</button>
<!-- <button type="button" class="btn btn-default" data-dismiss="modal" onclick="window.close()">关闭</button>-->
</div>
<span class="input-group-addon"></span>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</form>
注意几点:
1、form的属性enctype="multipart/form-data"。
2、文件记得添加。
前端js脚本
function save(){
var myform = new FormData();
myform.append('file', $("#file")[0].files[0]);
myform.append('projectName', $("#projectName").val());
myform.append('author', $("#author").val());
myform.append('description', $("#description").val());
$.ajax({
url:"license/create",
type:"POST",
data:myform,
async: false,
contentType: false,
processData: false, //用于对data参数进行序列化处理 这里必须false
}).done(function(data){
alert(data.info);
if(data.info=="添加成功"){
$("#projectName").val("");
$("#author").val("");
$("#description").val("");
location.reload();
}
}
);
}
注意:
1、注意添加的格式
var myform = new FormData();
myform.append('file', $("#file")[0].files[0]);
2、必须使用这样的属性
data:myform,
async: false,
contentType: false,
processData: false,
后端java程序
@RequestMapping(value = "/license/create",method = RequestMethod.POST)
@ResponseBody
public JSONObject createLicense(HttpSession session,HttpServletRequest request,Model model,@RequestParam("file") MultipartFile file) throws Exception{
System.out.println(file.getName());
if(!file.isEmpty()) {
//上传文件路径
String path = ("E:\\");
//上传文件名
String filename = file.getOriginalFilename();
File filepath = new File(path,filename);
//判断路径是否存在,如果不存在就创建一个
if (!filepath.getParentFile().exists()) {
filepath.getParentFile().mkdirs();
}
//将上传文件保存到一个目标文件当中
file.transferTo(new File(path + File.separator + filename));
}
System.err.println("get request");
String projectName = request.getParameter("projectName");
String author = request.getParameter("author");
}
注意:
1、文件读取@RequestParam("file") MultipartFile file
2、属性可以通过request获取,也可以直接用文件获取方式获取@RequestParam("author") String author
3、文件上传通过springMVC完成,具体完成方式参考之前的文章https://blog.csdn.net/u010365717/article/details/89712427