SSS项目专题（二）：异步文件上传

1.需求分析

异步上传文件，点击上传之后回显图片。

2.异步文件上传

①文件上传的准备

导入依赖

<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.3.2</version>
</dependency>

配置视图解析器

<!--multipartResolver配置 文件上传的配置 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!--编码格式-->
    <property name="defaultEncoding" value="UTF-8"/>
    <!--文件大小最大值  1024byte=1kb 1024kb=1M -->
    <property name="maxUploadSize" value="5242880"/>
</bean>

②前端文件上传框

<div class="layui-form-item">
    <label class="layui-form-label">照片</label>
    <button type="button" class="layui-btn" id="upfile">
        <i class="layui-icon">&#xe67c;</i>上传图片
    </button>
    <input type="hidden" name="photo" id="p1">
    <div class="layui-input-block">
        <img alt="个人一寸照片"  id="img1" width="200px" height="300px">
    </div>
</div>

③异步请求

layui.use(
        [ 'form','upload', 'layedit', 'laydate' ],
        function() {
            form = layui.form, layer = layui.layer, layedit = layui.layedit, laydate = layui.laydate;
            var upload = layui.upload;

            //执行实例
            var uploadInst = upload.render({
                elem: '#upfile' //绑定元素
                ,url: '${pageContext.request.contextPath}/emp_upload' //上传接口
                ,done: function(obj){
                    // alert(JSON.stringify(obj));
                    //上传完毕回调
                    console.log(obj);
                    if(obj.code==1000){
                        $("#p1").val(obj.msg);
                        $("#img1")[0].src="${pageContext.request.contextPath}/upload/"+obj.msg;
                        $("#btn1").attr("disabled",false);
                    }else{
                        $("#img1")[0].src="${pageContext.request.contextPath}/media/images/333.jpg";
                    }

                }
                ,error: function(result){
                    //请求异常回调
                    alert("文件上传异常:"+result);
                }
            });
       
            initData();//异步加载部门下拉框
        });

④Controller层

/**
 * 4-异步上传文件
 */
@ResponseBody
@RequestMapping("/emp_upload")
public Map<String, Object> emp_upload(MultipartFile file, HttpServletRequest request) throws Exception {
    Map<String, Object> map = new HashMap<String, Object>(); // 返回值必须满足插件的格式
    if (!file.isEmpty()) {
        String odlfilename = file.getOriginalFilename();
        System.out.println("要上传的原始文件名是：" + odlfilename);
        File f = createDir(request.getServletContext()); //返回的文件夹的服务器路径
        String newfileName = createName(odlfilename); //得到一个修改过的文件名
        File myfile = new File(f, newfileName);
        String absolutePath = myfile.getAbsolutePath();
        System.out.println("真实的文件路径:" + absolutePath);
        file.transferTo(myfile); //文件上传

        //截取文件名存入数据库
        int index = absolutePath.lastIndexOf("upload");
        String ss = absolutePath.substring(index + 7);

        map.put("code", 1000);
        map.put("msg", ss);
    } else {
        map.put("code", 10086);
        map.put("msg", "");
    }
    return map;
}

// 创建目录---以日期，一天一个文件夹
private File createDir(ServletContext context) {
    String realPath = context.getRealPath("/upload");
    String date = new SimpleDateFormat("yyyy-MM-dd").format(Calendar.getInstance().getTime());
    File file = new File(realPath, date);
    if (!file.exists()) {
        file.mkdir();
    }
    return file;
}

// 创建文件名--区分同名文件,在文件名前加上当前的时间
private String createName(String name) {
    return new SimpleDateFormat("yyyyMMddHHmmssSSS").format(Calendar.getInstance().getTime()) + "_" + name;
}