上传单张、多张图片demo示例
1、上传单张图片
jsp页面部分代码：
required name：后台controller接收传递参数
标签里面的
是为了在页面上显示默认图片的。
部分js代码：$(function () {
/!* 上传图片*!/
$("#imageFile").fileupload({
url: "/report/image",
dataType: 'json',
formData: null,
add: function (e, data) {
data.submit();
},
done: function (e, data) {
var result = data.result;
var url=result.data;
if (result.success == false) {
alert("上传失败");
} else {
console.info(url)
$("#uplImage").attr("src","/sysImage/showImg?src="+url);
$("#imageUrl").val(url);
}
},
progressall: function (e, data) {
} });
});controller部分代码：
@RequestMapping(value = "/image")
@ResponseBody
public Tip houseImages( @RequestParam(name = "images") MultipartFile file, HttpServletRequest request){
try {
String filename = file.getOriginalFilename();
String name = UUIDFactory.getStringId() + "_" + System.currentTimeMillis() + filename.substring(filename.lastIndexOf("."));
String url = "/images/" + name;
String realPath = request.getSession().getServletContext().getRealPath(url);
File img = new File(realPath);
if (!img.exists() && !img.isDirectory()) {
img.mkdirs();
}
file.transferTo(img);
return new Tip(url);//返回的时候携带一个url路径
} catch (Exception e) {
e.printStackTrace();
return new Tip(2);
}
}/**
* 输出文件流，输出本地绝对路径图片
* @param response
* @param request
* @param src 绝对路径 例如 d:/elangzhi/tempImg/head.jpg
* @throws IOException
*/
@RequestMapping("/showTempImg")
public void showTempImg(HttpServletResponse response, HttpServletRequest request,@RequestParam String src) throws IOException {
if(!"".equals(src)){
File file = new File(src);
//如果文件存在
if(file.exists()){
InputStream in = new FileInputStream(file);
outputStream(response,in);
}
}
}
/**
* 输出图片文件流，选择项目路径内部文件
* @param response
* @param request
* @param src 项目根路径，例如：/images/headimg/head.jpg
* @throws IOException
*/
@RequestMapping("/showImg")
public void showImg(HttpServletResponse response, HttpServletRequest request,@RequestParam String src) throws IOException {
if(!"".equals(src)){
String realPath = request.getServletContext().getRealPath(src);
File file = new File(realPath);
if(file.exists()){
InputStream in = new FileInputStream(file);
outputStream(response,in);
}
}
}
/**
* 输出文件流
* @param response
* @param in
* @throws IOException
*/
public void outputStream(HttpServletResponse response,InputStream in) throws IOException {
response.setContentType("image/jpeg");
OutputStream os = response.getOutputStream();
byte[] b = new byte[1024];
while( in.read(b)!= -1){
os.write(b);
}
in.close();
os.flush();
os.close();
}
至此，单张图片上传并显示完成！
2、上传多张图片jsp页面部分代码：
js部分代码： /!* 上传房产证照片*!/
$("#houseFile").fileupload({
url: "/userRoom/houseImages",
dataType: 'json',
formData: {"userRoomId":$("#id").val()},
add: function (e, data) {
data.submit();
},
done: function (e, data) {
var result = data.result;
var image = result.data;
var imgUrl = image.url;
var imgId=image.id;
console.info("图片的编号"+imgId);
if (result.success == false) {
alert("上传失败");
} else {
var div = $("");
var img = $("![](/sysImage/showImg?src="+imgUrl+")
");
var imgx = $("
");
div.append(img).append(imgx);
$("#houseImages").append(div);
}
},
progressall: function (e, data) {
}
});
需要注意的是： 上传完成图片以后 利用js 对div 进行追加操作
controller部分代码：
@RequestMapping(value = "/houseImages")
@ResponseBody
public Tip houseImages(@RequestParam String userRoomId,@RequestParam(name = "house") MultipartFile file,HttpServletRequest request){
try {
String filename = file.getOriginalFilename();
String name = UUIDFactory.getStringId() + "_" + System.currentTimeMillis() + filename.substring(filename.lastIndexOf("."));
String url = "/images/userRoom/" + name;
String realPath = request.getSession().getServletContext().getRealPath(url);
File img = new File(realPath);
if (!img.exists() && !img.isDirectory()) {
img.mkdirs();
}
file.transferTo(img);
Image image=new Image();
image.setId(UUIDFactory.getStringId());
image.setCreateTime(new Date());
image.setType("2");
image.setStatus("0");
image.setUrl(url);
image.setInfoId(userRoomId);
image.setIntro("房产证照片");
userRoomService.insertImg(image);
return new Tip(image);
} catch (Exception e) {
e.printStackTrace();
return new Tip(2);
}
}
读取图片显示 还是用上面的方法即可！
至此，多张图片上传完成！
小白一枚，仅供参考，不喜勿喷！谢谢！