springMVC图片上传的处理方式

首先需要依赖的jar包:

<dependency>
  <groupId>commons-io</groupId>
  <artifactId>commons-io</artifactId>
  <version>1.3.2</version>
</dependency>
<dependency>
  <groupId>commons-fileupload</groupId>
  <artifactId>commons-fileupload</artifactId>
  <version>1.2.1</version>
</dependency>

页面:

<a href="javascript:;" class="a-upload">
  <input class="" type="file" name="file" id="file" required="required">上传
</a>

大家如果觉得默认的上传文件的按钮不好看,可以引入下面的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(‘<div class="img-preview"><img src="‘ + result + ‘"/></div>‘);
        } 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;
    }
时间: 2024-10-13 16:32:45

springMVC图片上传的处理方式的相关文章

springmvc图片上传

//-------------------------------------上传图片--------------------------------------------------- @RequestMapping(value="upload2.action" ) public String upload2(HttpServletRequest request,HttpServletResponse response) throws IllegalStateException,

ueditor1.4.3 springmvc图片上传

ueditor:百度富文本编辑器,地址:ueditor.baidu.com 版本选择,之所以选择1.4.3,是因为ueditor 1.4.2才修复在bootstrap环境下图片拖拽异常,看到1.4.3也修复了不少的bug,没敢使用1.4.2,稍微看了下源码,1.4.3里面很多todo注释,ueditor一直在改进,不太成熟,既然这么多bug,为什么要选ueditor做富文本编辑?这个看项目组大神了,小喽啰没法做技术引入,如果有选择,不太建议用ueditor商用,bug比较多,当然使用简单也是个有

springmvc图片上传(兼容ie8以上,实时预览)

html代码: <form id="uploadform" method="post" enctype="multipart/form-data"> <table> <tr> <td><span class="need">   </span>新闻图片:</td> <td width="100" align="

springmvc图片上传、json

springmvc的图片上传 1.导入相应的pom依赖 <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.3</version> </dependency> 2.添加springmvc-servlet.xml里面的配置 <bean id=&q

jsp+ajax+springMvc图片上传立刻回显 电商

思路:onchange()事件触发异步请求,js将成功后返回图片的地址动态写入 JSP页面:  外层一个ID为myForm的表单 <pre name="code" class="html"> <a name="uploadImgs" id="uploadImgs"></a> <p><label><samp>*</samp>上传产品图片(XX尺寸

JavaWeb图片上传的几种方式

一.图片上传介绍 JavaWeb方向编程过程中,实现图片上传有三种方式: 1.传统的基于springMVC的MultipartFile类实现图片上传. 2.基于Ajax的图片上传. 3.基于Base64压缩的图片上传. 二.springMVC图片上传(springboot通用) 此方法的优点是可以将图片和其他的表单元素一起提交到服务器,服务器接受到的图片其实已经存储于容器的临时文件中,进行文件拷贝工作比较简单. 缺点是无法及时看到图片上传的预览效果,图片一旦选择错误只能重新提交. 注:红色代码为

妈蛋:kinMaxShow轮播图异常,WebUploader图片上传坑爹,图片被压缩了

今天晚上在改造轮播图. 原来的代码是这样的: <div> <img src="${static}/image/index/banner/`.jpg" /> </div> <div> <img src="${static}/image/index/banner/2.jpg" /> </div> <div> <img src="${static}/image/index/

妈蛋:kinMaxShow旋转木马异常,WebUploader图片上传坑爹,图像被压缩

今天晚上在改造轮播图. 原来的代码是这种: <div> <img src="${static}/image/index/banner/`.jpg" /> </div> <div> <img src="${static}/image/index/banner/2.jpg" /> </div> <div> <img src="${static}/image/index/b

图片上传之fileupload

最近学习了图片上传这个功能,这个功能比较常见,因此来整理一下,了解上传的基本原理,以便后期遇到图片上传功能可以很快上手. 要说图片上传,我们先来说一下图片上传后存储的两种方式:一种是将图片存储到数据库中:一种是将图片存储在服务器文件目录中.首先,对于将图片存储到数据库中适合数据量小的情况,因为写到数据库的图片需要转换成二进制流的格式,占用数据空间比较,适合少量图片的存储,比如,系统中某些小图标,写到数据库中的优点是比较安全,不容易被用户不小心删除.但是,图片存在数据库的操作方面的局限性太大,还要