符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
本文实例为大家分享了springMVC图片上传的处理方式,供大家参考,具体内容如下
创新互联专注于企业营销型网站建设、网站重做改版、梁子湖网站定制设计、自适应品牌网站建设、H5开发、商城系统网站开发、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为梁子湖等各大城市提供网站开发制作服务。
首先需要依赖的jar包:
commons-io commons-io 1.3.2 commons-fileupload commons-fileupload 1.2.1
页面:
大家如果觉得默认的上传文件的按钮不好看,可以引入下面的css样式:
.a-upload { padding: 4px 10px; height: 27px; line-height: 27px; position: relative; cursor: pointer; color: #888; background: #fafafa; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; } .a-upload input { position: absolute; width: 100%; 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 }
前端脚本:
$('#file').on('change', function () { var $this = $(this); var formData = new FormData(); formData.append('file', $('#file')[0].files[0]); var fileName = $('#file')[0].files[0].name; var fileType = fileName.substring(fileName.lastIndexOf('.') + 1); var fileSize = $('#file')[0].files[0].size; if (fileType != 'jpg' && fileType != 'png' && fileType != 'gif') { alert("请上传.jpg、.png、.gif格式的图片!"); return; } if (fileSize > 300 * 1024) { alert("请上传大小小于300KB的图片!"); return; } $.ajax({ url: '/admin/upload', type: 'POST', data: formData, cache: false, processData: false, contentType: false }).done(function (result) { if (result != '') { $this.closest('div').append(''); } else { alert("请上传.jpg、.png、.gif格式的图片!"); } }).fail(function () { alert("图片上传失败!"); }); });
后端接收:
@RequestMapping(value = "admin/upload", method = RequestMethod.POST) @ResponseBody public String uploadFile(@RequestParam("file") MultipartFile file) { try { String filename = file.getOriginalFilename(); if (filename.endsWith("jpg") || filename.endsWith("png") || filename.endsWith("gif")) { String prefix = filename.substring(filename.lastIndexOf(".")); String imgName = UUID.randomUUID().toString() + prefix; String imgUri = writeToFileSystem(imgName, file.getBytes()); return imgUri; } } catch (Exception e) { LOG.error("uploadFile failed:", e); } return null; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。