使用LayUI进行文件上传(带预览功能)

使用LayUI进行文件上传(带预览功能)

1、添加LayUI上传组件需要的js文件

jquery.min.js、layui.all.js、layer.js

2、导入上传组件jar包

commons-fileupload、commons-io

3、在spring配置文件中限制上传文件的大小，否则会报错

<!-- 设置上传文件最大值   1M=1*1024*1024(B)=1048576 bytes -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="maxUploadSize" value="1048576" />
</bean>

4、jsp页面代码

<div class="layui-upload">
  <button type="button" class="layui-btn" id="test1">上传图片button>
  <div class="layui-upload-list">
    <img class="layui-upload-img" id="previewImg">
    <p id="demoText">p>
  div>
div>

5、js代码

<script type="text/javascript">
    //图片上传
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/uploadImages'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){                  
                    $('#previewImg').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功，返回的路径：res.filePath

            }
            ,error: function(){
                //上传失败
                return layer.msg('上传失败，请重试!');
            }
        });
    });
</script>

6、后台java代码及工具类

/**
 * 文件上传
 * @param file
 * @param request
 * @param response
 * @return
 * @throws Exception
 */
@RequestMapping(value = "/uploadImages",method=RequestMethod.POST)
@ResponseBody
public WebUploadResult uploadImages(MultipartFile file,HttpServletRequest request, HttpServletResponse response) throws Exception {
    String destDir = "/upload/picture";
    WebUploadResult webResult = new WebUploadResult();
    try {
        String path = WebUpload.uploads(file, destDir, request,response);
        webResult.setStatus(0);
        webResult.setFilePath(path);
    } catch (Exception e) {
        e.printStackTrace();
    }
    return webResult;
}

WebUpload.java类

WebUploadResult.java类

WebUploadError.java类

/**
 * 默认的页面请求返回的model对象.用来包裹controller的页面输出
 */
public class WebUploadError {
   private int code;
   private String message;
   public int getCode() {
      return code;
   }
   public void setCode(int code) {
      this.code = code;
   }
   public String getMessage() {
      return message;
   }
   public void setMessage(String message) {
      this.message = message;
   }
}

注意：
在普通文件上传中，我们都是用

<input type="file" name="file">

这样来控制上传的。在LayUI上传组件中，实际上也是用这种方式来实现的。