您的位置:首页 > 其它

简单的图片上传功能

2017-12-22 13:50 134 查看
layui的上传插件和java后台的实现

首先了解一下layui:http://www.layui.com/doc/modules/upload.html

上传后展示图片的效果:



js部分代码:

<button type="button" class="layui-btn" id="test1">
<i class="layui-icon"></i>上传图片
</button>
<div class="layui-upload-list">
<img style="width:120px;height: 120px;" class="layui-upload-img" id="demo1">
<p id="demoText"></p>
</div>
<script src="/static/build/layui.js"></script>
<script>
layui.use('upload', function(){
var upload = layui.upload;

//执行实例
var uploadInst = upload.render({
elem: '#test1' //绑定元素
,url: '/upload/' //上传接口
,done: function(res){
if (res.code == 0) {
//回调显示图片
$('#demo1').attr('src','<%=basePath%>file/img.do?name='+res.name);
layer.msg(res.msg);
}
}
,error: function(){
//请求异常回调
}
});
});
</script>


后台实现:

FileUtil工具类:

public class FileUtils {
private static final String FILE_PATH = "D://testUpload";
public static Image getImage(MultipartFile file) {
String fileName = file.getOriginalFilename().substring(0,file.getOriginalFilename().indexOf("."));
Image image = new Image();
try {
InputStream inputStream = file.getInputStream();
byte[] buff = null;
int i = inputStream.available();
// byte数组用于存放图片字节数据
buff = new byte[i];
inputStream.read(buff);
// 记得关闭输入流
inputStream.close();
image.setName(fileName);
image.setImage(buff);
} catch (IOException e) {
e.printStackTrace();
}
return image;
}
}


Controller层:

/**
* 图片上传
* @param file
* @param request
* @return
*/
@RequestMapping("/uploadImage")
@ResponseBody
public Map<String, Object> upLoadImage(MultipartFile file,
HttpServletRequest request) {
Map<String, Object> map = new HashMap&
a526
lt;String, Object>();
try {
Image image = FileUtils.getImage(file);
if (image != null) {
int result = fileService.saveImage(image);
map.put("name", image.getName());
map.put("code", 0);
map.put("msg", "上传成功");
} else {
map.put("code", 1);
map.put("msg", "上传失败");
}
} catch (Exception e) {
e.printStackTrace();
map.put("code", 2);
map.put("msg", "异常,上传失败!!!");
}

return map;
}

/**
* 图片显示
* @param request
* @return
*/
@RequestMapping("/img")
@ResponseBody
public byte[] getImage(HttpServletRequest request) {
String name = request.getParameter("name");
return fileService.getImageByName(name).get(0).getImage();
}


实体 Image类:

public class Image implements Serializable {

private static final long serialVersionUID = -1323571281816600020L;

private String id;
private String name;
private byte[] image;

public String getId() {
return id;
}

public void setId(String id) {
this.id = id;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public byte[] getImage() {
return image;
}

public void setImage(byte[] image) {
this.image = image;
}

}


本案例是将图片保存到数据库中。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐