1.引入讲个jar包 springmvc设置
commons-fileupload-1.3.3.jar
commons-io-2.5.jar
2.springmvc配置
<!-- 定义文件解释器 -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 设置默认编码 -->
<property name="defaultEncoding" value="utf-8"></property>
<!-- 文件大小最大值 -->
<property name="maxUploadSize" value="10485760000" />
<!-- 内存中的最大值 -->
<property name="maxInMemorySize" value="40960" />
</bean>3.HTML 对file做了css美化
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>新增地名标志</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-datetimepicker.css" type="text/css"/>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/bootstrap-datetimepicker.js"></script>
<script src="js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="js/table.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="../../js/jquery.tips.js"></script>
<script src="js/hint.js"></script>
<style>
.readonly{
background-color: rgb(242, 242, 242);
}
/*a upload */
.a-upload {
padding: 4px 10px;
height: 36px;
line-height: 20px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1
}
.a-upload input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
}
.a-upload:hover {
color: #444;
background: #eee;
border-color: #ccc;
text-decoration: none
}
.close-upimg:hover {
background-color: blue;
}
</style>
</head>
<body>
<form id="dmbz">
<table class="table table-bordered table-hover">
<tr>
<td class="danyuange">标志文件上传</td>
<td colspan="7">
<a href="javascript:;" id="a-upload"class="a-upload" style="float:left;">
<input type="file" id='file21' name="zhaopianwenjianming" onchange="showPreview(this)">点击这里上传文件
</a>
<div class=fileImgDel style="height:36px;float:left;line-height: 36px;">
<span class='show' name="show" style='float:left;height:36px;margin-left: 10px;'></span>
<img src='../../img/del.png' class='close-upimg' id='close-upimg' onclick="delFile()" style='float:left;position:relative;top:10px;'>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
<script type="text/javascript">
function showPreview(source) {
$(".fileImgDel").empty();
$(".fileImgDel").append("<span class='show' name='show' style='float:left;height:36px;margin-left: 10px;'></span>"
+"<img src='../../img/del.png' class='close-upimg' id='close-upimg' onclick="
+"delFile()"
+" style='float:left;position:relative;top:10px;'>");
var arrs = $(source).val().split('\\');
var filename=arrs[arrs.length-1];
$(".show").text(filename);
}
function delFile(){
$(".fileImgDel").empty();
document.getElementById("a-upload").innerHTML="<input type='file' id='file21' name='zhaopianwenjianming' onchange='showPreview(this)'>点击这里上传文件";
$(".fileImgDel").append("<span class='show' name='show' style='float:left;height:36px;margin-left: 10px;'></span>"
+"<img src='../../img/del.png' class='close-upimg' id='close-upimg' onclick="
+"delFile()"
+" style='float:left;position:relative;top:10px;'>");
//var biaozhidaima=$("#biaozhidaima").val();
}
</script>4.ajax提交
function placeMark_Save(){
var ss2,fd;
if(!!window.ActiveXObject || "ActiveXObject" in window){//判断浏览器是否为IE11
//alert('是IE！')
ss2 = $("#dmbz", window.frames['iframe_bz'].document);
}else{
//alert('非IE！')
ss2 = $("#dmbz", window.frames['iframe_bz'].contentDocument);
}
//-----------------------------------------------------formdata
if (action == "add") {
fd = new FormData(ss2[0]);
fd.append("id","0");//新增formdata元素
fd.append("uuid","");
fd.append("diminguuid",dmInfo.guid);
fd.append("action","add");
}else{
fd = new FormData(ss2[0]);
fd.append("action","edit");
fd.append("uuid",uuid_biaozhi);
}
//ajax提交
$.ajax({
url: 'placeName/biaoZhiSave.do',
type: 'POST',
datatype: 'json',
data: fd,
cache:false,
traditional: true,
contentType: false,
processData: false,
success : function(data) {
if (data) {
placeMarkTable_Close();// 成功后才能关闭对话框
jQuery(placeMark_Table).jqGrid('setGridParam', {
url : 'placeName/biaozhiInit.do'
}).trigger('reloadGrid');
} else {
$("#markBtn").tips({
side : 1,
msg : "数据保存失败!",
bg : '#FF5080',
time : 5
});
}
}
});
}5.Controller.java文件
@RequestMapping(value = "/biaoZhiSave")
public void biaoZhiSave(@RequestParam(value = "zhaopianwenjianming", required = false)MultipartFile zhaopianwenjianming,
HttpServletRequest request,HttpServletResponse response) throws IllegalStateException, IOException{
String newUuid = "";
String action = request.getParameter("action");// 操作符
String fileName=request.getParameter("biaozhidaima");//标志代码---作为文件名
JSONObject jsonData=new JSONObject();//将传入的数据转为json对象
Map<String,String[]> paramMap = request.getParameterMap();
for(String name : paramMap.keySet()) {
String[] values = paramMap.get(name);
jsonData.put(name, StringUtils.join(values));
}
//保存图片
if (!zhaopianwenjianming.isEmpty()) {//如果有图片
//保存到服务器WEB-INF\\upload目录下
String realPath = request.getSession().getServletContext().getRealPath("/WEB-INF/upload");
String ext = FilenameUtils.getExtension(zhaopianwenjianming.getOriginalFilename());//文件后缀名
zhaopianwenjianming.transferTo(new File(realPath+"\\"+ fileName + "." + ext));
jsonData.put("zhaopianwenjianming",fileName + "." + ext);
//保存文件到D:\\upload目录下
/* String ext = FilenameUtils.getExtension(zhaopianwenjianming.getOriginalFilename());//文件后缀名
zhaopianwenjianming.transferTo(new File("D:\\upload\\" + fileName + "." + ext));
jsonData.put("zhaopianwenjianming",fileName + "." + ext);*/
}
}