版权声明： https://blog.csdn.net/linmengmeng_1314/article/details/82053244
文章参考：https://blog.csdn.net/qq_38413523/article/details/80310300
优化了添加图片时在当前页面的预览
第一步：当然是需要加入必要的两个jar包
commons-fileupload-1.3.jar、commons-io-1.2.jar
或者引入依赖：
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-io</artifactId>
<version>1.3.2</version>
</dependency>
第二步：首先要在我们的springMVC.xml文件中添加上传文件解析器
<!-- 配置多媒体文件解析器 -->
<!-- 文件上传 -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 设置默认编码 -->
<property name="defaultEncoding" value="utf-8"></property>
<!-- 设置上传文件的最大尺寸为5MB -->
<property name="maxUploadSize">
<value>5242880</value>
</property>
</bean>第三步：然后我们要在WebRoot目录下创建一个“upload”文件夹
这个名字你们可以随便取，调用的时候就调用你取的这个名字就行了
上传的文件会出现在服务器上的tomcat下面的项目名里的upload下面
例如我的是这个：E:\apache-tomcat-7.0.90\webapps\项目名\upload
第四步：修改页面jsp中的部分代码：
效果如图：
首先是JavaScript：
<script type="text/javascript">
//下面用于图片上传预览功能
function setImagePreview(avalue) {
var docObj=document.getElementById("doc");
var imgObjPreview=document.getElementById("preview");
if(docObj.files &&docObj.files[0])
{
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '100px';
imgObjPreview.style.height = '100px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
else
{
//IE下，使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "150px";
localImagId.style.height = "180px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch(e){
alert("您上传的图片格式不正确，请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>下面是form里面的内容：
<form action="goods/updateGoods.do" method="post" enctype="multipart/form-data" >
<ul class="forminfo">
<input type="hidden" name="macId" value="${goods.macId }" />
<li><label>名称：</label><input id="goodsName" name="goodsName"
value="${goods.goodsName }" class="dfinput" /><br></li>
<li><label>描述：</label><input id="goodsDesc" name="goodsDesc"
value="${goods.goodsDesc }" class="dfinput" /><br></li>
<li><label>图片：</label>
<div id="localImag">
<img id="preview" src="http://localhost:8080/third_vm/${goods.goodsPic}" width="100" height="100">
</div>
<input type="file" id="doc" name="file" onchange="javascript:setImagePreview();" /><br></li>
<li><label>价格：</label><input id="goodsPrice" name="goodsPrice"
value="${goods.goodsPrice }" class="dfinput" /><br></li>
<li><label>成本：</label><input id="goodsNetPrice" name="goodsNetPrice"
value="${goods.goodsNetPrice }" class="dfinput" /><br></li>
<li><label>重量：</label><input id="goodsWeight" name="goodsWeight"
value="${goods.goodsWeight }" class="dfinput" /><br></li>
<li><label>单位：</label><input id="goodsUnit" name="goodsUnit"
value="${goods.goodsUnit }" class="dfinput" /><br></li>
<li><label>有效期：</label><input id="goodsExpiration" name="goodsExpiration"
value="${goods.goodsExpiration }" class="dfinput" /><br></li>
<li><label>属性：</label><input id="goodsAttribute" name="goodsAttribute"
value="${goods.goodsAttribute }" class="dfinput" /><br></li>
<li><input type="submit" value="修改" class="scbtn" /> <input
type="button" name="Submit" onclick="javascript:history.back(-1);"
value="返回" class="scbtn" />
</li>
</ul>
</form>敲黑板！！划重点了！！
这里有几个地方需要注意：
第一：提交的方式需要是POST
第二：需要添加enctype="multipart/form-data"
第三：也是最重要的一点
这里使用的是pojo类下的goodsPic 来保存图片的路径和名称（显示的时候需要用到）
扫描二维码关注公众号，回复：
3052235 查看本文章
在jsp页面中，input的name属性一定不能与pojo类的存贮属性名相同，不然就会报错HTTP 400 就因为这个折腾了半天才查出来原因，debug也用了 竟然发现页面跳转直接就不会进入controller方法里面 直接就报错了，很是莫名其妙！
为了和属性区分，这里使用的是file ，因为在修改资料的时候，还有实体类对象传入controller，所以不能重名。
第四步：上传图片的Controller类的代码（这里面的“upload”就是我们创建的文件夹的名称）：
@RequestMapping("/updateGoods")
public String updateGoods(@RequestParam(value="file")MultipartFile pictureFile,HttpServletRequest request, Goods goods, String goodsName, String macId) throws IOException{
//这个RequestParam(value="file")的是我们在jsp的name=“file”
// 使用UUID给图片重命名，并去掉四个“-”
String name = UUID.randomUUID().toString().replaceAll("-", "");
// 获取文件的扩展名
String ext = FilenameUtils.getExtension(pictureFile
.getOriginalFilename());
// 设置图片上传路径
String url = request.getSession().getServletContext()
.getRealPath("/upload");
System.out.println(url);
// 以绝对路径保存重名命后的图片
pictureFile.transferTo(new File(url + "/" + name + "." + ext));
// 把图片存储路径保存到数据库
goods.setGoodsPic("upload/" + name + "." + ext);
String currentAdmin = (String)request.getSession().getAttribute("name");
goods.setUpdateAdmin(currentAdmin);
goods.setGoodsName(goodsName);
goods.setMacId(macId);
boolean updateGoods = goodsService.updateGoods(goods);
System.out.println(updateGoods);
return "redirect:goodsStock.do";
}这里重点要关注的就两点，一个是实体类对象Goods和一个MultipartFile ，这俩是提交资料时不能少的