使用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上传组件中，实际上也是用这种方式来实现的。