Layui,SSM实现的头像上传

准备工作

1.导入文件上传的jar包

    <dependency>
        <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>1.3.3</version>
    </dependency>
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>javax.servlet-api</artifactId>
        <version>4.0.1</version>
    </dependency>

2、配置bean
注意！！！这个bena的id必须为：multipartResolver ， 否则上传文件会报400的错误！

 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 设置上传文件的最大尺寸为10MB -->
        <property name="maxUploadSize">
            <value>10485760</value>
        </property>
        <!--设置编码，与jsp页面编码一致-->
        <property name="defaultEncoding">
            <value>UTF-8</value>
        </property>
    </bean>

3.使用layui文件上传样式

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>常规使用：普通图片上传</legend>
</fieldset>
<div class="layui-upload">
    <button type="button" class="layui-btn" id="test1">上传图片</button>
    <div class="layui-upload-list">
        <img class="layui-upload-img" id="demo1">
        <p id="demoText"></p>
    </div>
</div>

JS代码

<script>
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;

        //普通文件上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: 'upload'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                console.log(res);
                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
    });
</script>

4.设置上传文件的Controller
这里采用file.Transto 来保存上传的文件

 //资源上传
    @RequestMapping(value="upload",method= RequestMethod.POST,produces="application/json;charset=utf-8")
    @ResponseBody
    public Map<String, Object> uploadResource(HttpServletRequest request, HttpServletResponse response, HttpSession session, MultipartFile file) throws Exception{
        //上传路径保存设置
        String path = request.getServletContext().getRealPath("/upload/yc");
        System.out.println(path);
       //获取上传的文件名
        /*String fileName = file.getOriginalFilename();
        System.out.println(fileName);*/
        //这里设置每个用户头像img只有一个
        String fileName="tou.jpg";
        File dir = new File(path,fileName);
        if(!dir.exists()){
            dir.mkdirs();
        }
        //MultipartFile自带的解析方法
        file.transferTo(dir);
        //upload要求返回的数据格式
        Map<String, Object> uploadData = new HashMap<String, Object>();
        Map<String, Object> data = new HashMap<String, Object>();
        uploadData.put("code", "0");
        uploadData.put("msg", "ok");
        //将文件路径返回
        data.put("src", dir.getPath());
        uploadData.put("data", data);
        return uploadData;
    }