ssm项目上传图片

最新推荐文章于 2024-06-17 11:16:55 发布

Sunshine_du

最新推荐文章于 2024-06-17 11:16:55 发布

阅读量3.2k

点赞数 2

分类专栏： SSM

本文链接：https://blog.youkuaiyun.com/dulonghao/article/details/78196999

版权

SSM 专栏收录该内容

2 篇文章

订阅专栏

把图片的路径名作为varchar型保存到数据库中。显示的时候就到数据库中查找路径名，处理后赋值给<img>的src属性

然后是同过IO流把图片作为文件保存到服务器upload文件夹，具体实现：

1.添加对应的jar包

2.Controller页面

@RequestMapping(value="/add",method=RequestMethod.POST)
@ResponseBody
public Map<String, Object> doAdd(HttpServletRequest request,@RequestParam("pic") MultipartFile multipartFile,reimb reimb){
Map<String, Object> map = new HashMap<String, Object>();
//处理上传文件
String oldFileName = multipartFile.getOriginalFilename();
//文件后缀
String suffix = oldFileName.substring(oldFileName.lastIndexOf("."));
//获取文件提交路径(服务器)
//request.getServletContext() --> application
String uploadPath = request.getServletContext().getRealPath("/upload");
//文件重命名
//时间(毫秒数)+随机数+_blog+suffix
//1970-1-1~今天   System.currentTimeMillis();
String newFileName = System.currentTimeMillis()+new Random().nextInt(1000000)+"_blog"+suffix;
//上传文件 java.io.File
File targetFile = new File(uploadPath,newFileName);
try {
multipartFile.transferTo(targetFile);
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
reimb.setMypic(newFileName);
reimbdao.insert(reimb);
map.put("result", true);
return map;
}

3.spring-mvc页面

 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="500000"></property>
<property name="defaultEncoding">
<value>UTF-8</value>
</property>
 </bean>

4.add.jsp页面

<div class="form-group">
    <label for="pic" class="col-sm-2 control-label">报销单据:</label>
    <div class="col-sm-10">
      <input type="file" name="pic" class="form-control" id="pic" placeholder="上传图片">
    </div>
  </div>
 <button type="button" class="btn btn-primary" οnclick="submitForm()">保存</button>

function submitForm(){
var $form = $modal.find('form');
var action = $form.attr('action');
//文件上传提交表单需要如下代码
//FormData html5新添加的属性 ,可以支持文件上传
//FormData 在ie8中不支持,  jquery.form.js
//new FormData(dom)
//jquery-->dom  $form.get(0);  $form[0]
//dom-->jquery  $(dom)
var form = new FormData($form.get(0));
$.ajax({
url:action,
type:'post',
data:form,
async: false,
                cache: false,
               contentType: false,
                processData: false,
success:function(data){
$modal.modal('hide');
swal("添加成功！", "看去看看吧", "success");
bootTable.bootstrapTable('refresh');
}
});
}