1.通过form表单上传图片或文件
直接复制就可以运行的
jsp层代码
<!-- <form action="pow/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="picpath" />
<button class="btn btn-info">上传</button>
</form>
<img alt="" src="E:/java项目/maven/power/power/src/main/webapp/img/wdt.jpg"> -->
controller层代码
@RequestMapping("/upload")
@ResponseBody
public String addUser(@RequestParam("file") CommonsMultipartFile[] files, HttpServletRequest request) {
for (int i = 0; i < files.length; i++) {
System.out.println("fileName---------->" + files[i].getOriginalFilename());
SimpleDateFormat fmt = new SimpleDateFormat("HH点mm");
// 上传的绝对路径
File file = new File(
"E:\\java项目\\maven\\power\\power\\src\\main\\webapp\\img\\" + files[i].getOriginalFilename());
if (!files[i].isEmpty()) {
int pre = (int) System.currentTimeMillis();
try {
// 拿到输出流,同时重命名上传的文件
FileOutputStream os = new FileOutputStream(file);
// 拿到上传文件的输入流
FileInputStream in = (FileInputStream) files[i].getInputStream();
// 以写字节的方式写文件
int b = 0;
while ((b = in.read()) != -1) {
os.write(b);
}
os.flush();
os.close();
in.close();
int finaltime = (int) System.currentTimeMillis();
System.out.println(finaltime - pre + "ms");
} catch (Exception e) {
e.printStackTrace();
System.out.println("上传出错");
}
}
}
return "/success";
}
form表单结束
2.通过ajax上传图片
演示:
前端html代码:
<a href="javascript:void(0)" onclick="uploadPhoto()">选择图片</a>
<input type="file" id="photoFile" style="display: none;" onchange="upload()">
<img id="preview_photo" src="" width="200px" height="200px">
css:
/* 去除图片预览未选择时默认时的边框 */
img[src=""],img:not([src]){
opacity:0;
}
js:
function uploadPhoto() {
$("#photoFile").click();
}
/* 上传图片 */
function upload() {
if ($("#photoFile").val() == '') {
return;
}
var formData = new FormData();
//$("#photoFile")不起作用
formData.append('photo', document.getElementById('photoFile').files[0]);
//可与文件一起传到后台 后台接收代码在下面
// formData.append('name',"cth");
$.ajax({
url:"http://192.168.0.104:8080/dingning/dn/uploadPhoto",
type:"post",
data: formData,
//contentType,processData不加会报非法请求
contentType: false,
processData: false,
success: function(data) {
//返回map集合
if (data.type == "success") {
//照片回显 (刷新页面后照片不显示)解决:把路径存入到数据库然后通过调用数据库显示图片
$("#preview_photo").attr("src", "http://192.168.0.104:8080"+data.filepath+data.filename);
alert(data.filepath+data.filename)
// $("#productImg").val(data.filename);
zeroModal.alert("上传成功!")
} else {
zeroModal.alert(data.msg);
}
},
error:function(data) {
zeroModal.alert("上传失败")
}
});
}
java后端代码
Controller层:
我是存到本项目路径 建议把图片保存到服务器 然后将图片路径保存在数据库
前端访问的时候 直接ajax获取数据库路径即可显示
/**
* 图片上传到本项目路径
* @param photo
* @param request
* @return
*/
@RequestMapping(value = "/uploadPhoto", method = RequestMethod.POST)
@ResponseBody
public Map<String, String> uploadPhoto(MultipartFile photo, HttpServletRequest request) {
MultipartHttpServletRequest multipartRequest=(MultipartHttpServletRequest) request;
//接收dataform数据用getParameter
System.out.println(multipartRequest.getParameter("name"));
Map<String, String> map = new HashMap<String, String>();
if (photo == null) {
map.put("type", "error");
map.put("msg", "选择要上传的文件!");
return map;
}
if (photo.getSize() > 1024 * 1024 * 10) {
map.put("type", "error");
map.put("msg", "文件大小不能超过10M!");
return map;
}
//获取文件后缀
String suffix = photo.getOriginalFilename().substring(photo.getOriginalFilename().lastIndexOf(".") + 1, photo.getOriginalFilename().length());
if (!"jpg,jpeg,gif,png".toUpperCase().contains(suffix.toUpperCase())) {
map.put("type", "error");
map.put("msg", "请选择jpg,jpeg,gif,png格式的图片!");
return map;
}
//获取项目根目录加上图片目录 webapp/static/imgages/upload/
String savePath = request.getSession().getServletContext().getRealPath("/") + "/img/upload/";
File savePathFile = new File(savePath);
if (!savePathFile.exists()) {
//若不存在该目录,则创建目录
savePathFile.mkdir();
}
String filename = new Date().getTime() + "." + suffix;
try {
//将文件保存指定目录
photo.transferTo(new File(savePath + filename));
} catch (Exception e) {
map.put("type", "error");
map.put("msg", "保存文件异常!");
e.printStackTrace();
return map;
}
map.put("type", "success");
map.put("msg", "上传图片成功!");
map.put("filepath", request.getSession().getServletContext().getContextPath() + "/img/upload/");
map.put("filename", filename);
return map;
}