异步上传图片,并加载在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" onchange="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("上传图片失败"); } }