异步上传图片,并加载在jsp页面上
JavaScript
function uploadPic() {
// 上传设置
var options = {
// 规定把请求发送到那个URL
url: "${webRoot}/dataCheck/uploadPic.do",
// 请求方式
type: "post",
// 服务器响应的数据类型
dataType: "json",
// 请求成功时执行的回调函数
success: function(data, status, xhr) {
// 图片显示地址
$("#allUrl").attr("src", "${webRoot}/"+data.path);
$("#dealImgURL").attr("value", data.path);
}
};
$("#jvForm").ajaxSubmit(options);
}
HTML
<input class="cs-hide" type="text" name="dataUnqualifiedTreatment.dealImgurl" id="dealImgURL"/>
<td width="80%">
<img width="100" height="100" id="allUrl" class="preview"/>
<!-- 在选择图片的时候添加事件,触发Ajax异步上传 -->
<input name="pic" type="file" οnchange="uploadPic()"/>
</td>
后台action(control)
/**
* 使用Ajax异步上传图片
*
* @param pic 封装图片对象
* @param request
* @param response
* @throws IOException
* @throws IllegalStateException
*/
@RequestMapping("/uploadPic")
public void uploadPic(MultipartFile pic, HttpServletRequest request, HttpServletResponse response) throws IllegalStateException, IOException {
try {
// 获取图片原始文件名
String originalFilename = pic.getOriginalFilename();
System.out.println(originalFilename);
// 文件名使用当前时间
String name = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());
// 获取上传图片的扩展名
String extension = FilenameUtils.getExtension(originalFilename);
// 图片上传的相对路径(因为相对路径放到页面上就可以显示图片)
String path = "/img/dataCheck/" + name + "." + extension;
// 图片上传的绝对路径
String url = request.getSession().getServletContext().getRealPath("") + path;
File dir = new File(url);
if(!dir.exists()) {
dir.mkdirs();
}
// 上传图片
pic.transferTo(new File(url));
// 将相对路径写回(json格式)
JSONObject jsonObject = new JSONObject();
// 将图片上传到本地
jsonObject.put("path", path);
// 设置响应数据的类型json
response.setContentType("application/json; charset=utf-8");
// 写回
response.getWriter().write(jsonObject.toString());
} catch (Exception e) {
throw new RuntimeException("上传图片失败");
}
}