实际项目中,一般都是上传到图片服务器;
上传图片到项目静态资源路径:
1、后台代码:
package com.xxx.xxx.controller;
import java.io.File;
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.util.ClassUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
@Controller
@RequestMapping("/upload")
public class UploadController {
/**
* 上传文件到项目的静态文件目录
* @param file
* @param request
* @return
*/
@ResponseBody
@RequestMapping("/uploadImage")
public String uploadImage(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
//获取项目classes/static的地址
String staticPath = ClassUtils.getDefaultClassLoader().getResource("static").getPath();
String fileName = file.getOriginalFilename(); //获取文件名
// 图片存储目录及图片名称
String url_path = "images" + File.separator + fileName;
//图片保存路径
String savePath = staticPath + File.separator + url_path;
System.out.println("图片保存地址:"+savePath);
// 访问路径=静态资源路径+文件目录路径
String visitPath ="static/" + url_path;
System.out.println("图片访问uri:"+visitPath);
File saveFile = new File(savePath);
if (!saveFile.exists()){
saveFile.mkdirs();
}
try {
file.transferTo(saveFile); //将临时存储的文件移动到真实存储路径下
} catch (IOException e) {
e.printStackTrace();
}
return visitPath;
}
}
2、HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片上传</title>
</head>
<body>
<form id="form" enctype="multipart/form-data">
<input type="file" id="upload" name="file">
<button type="submit">提交</button>
</form>
<br/>
<img id="testImg" src="" alt="图片" />
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.1/jquery.form.min.js"></script>
<script>
/* 文件改变时触发文件上传 */
$('#upload').change(function(){
// 设置ajax参数
var options = {
url : "/test-demo/uploadImage",
type: "POST",
success: function (data) {
// 设置图片地址
var imgUrl = "/test-demo/"+data;
$("#testImg").attr("src", imgUrl);
}
}
// 提交表单
$('#form').ajaxSubmit(options);
return false;
})
</script>
</html>
注意问题:
有时候下面这行代码会出现空指针异常
String staticPath = ClassUtils.getDefaultClassLoader().getResource("static").getPath();
原因:static文件路径是项目构建、编译后class存放的路径,如果static文件目录里面没有文件,那么项目编译后一般就不会生成static目录,所以导致取不到路径就出现空指针异常;
举例说明:
1. static文件目录中没有文件的情况:classes目录下不会生成static文件目录
2.static文件目录中有文件的情况:生成了static目录