Ajax实现异步上传图片

Posted For_elegant

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax实现异步上传图片相关的知识,希望对你有一定的参考价值。

要求:点击页面浏览按钮后,选择需要上传的图片,页面无刷新,将上传的图片展示出来

开发流程

一:在页面编写表单代码和js代码

 

[html] view plain copy
 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  

<title>Ajax异步上传图片</title>  

<-- 引入jQuery异步上传js文件 -->  

<script src="/resource/jquery.form.js" type="text/javascript"></script>  

<!-- Ajax异步上传图片 -->  

<script type="text/javascript">  

    function uploadPic() {  

      // 上传设置  

      var options = {  

                // 规定把请求发送到那个URL  

                url: "/upload/uploadPic.do",  

                // 请求方式  

                type: "post",  

                // 服务器响应的数据类型  

                dataType: "json",  

                // 请求成功时执行的回调函数  

                success: function(data, status, xhr) {  

                    // 图片显示地址  

                    $("#allUrl").attr("src", data.path);  

                }  

        };  

        $("#jvForm").ajaxSubmit(options);  

    }  

</script>

 </head>  

<body>  

<form id="jvForm" action="o_save.shtml" method="post" enctype="multipart/form-data">  

<table>  

<tbody>  

<tr>  

<td width="20%">  

<span>*</span>  

             上传图片(90x150尺寸):</td>  

<td width="80%">  

                        注:该尺寸图片必须为90x150。  

</td>  

</tr>  

<tr>  

<td width="20%"></td>  

<td width="80%">  

<img width="100" height="100" id="allUrl"/>  

<!-- 在选择图片的时候添加事件,触发Ajax异步上传 -->  

<input name="pic" type="file" onchange="uploadPic()"/>  

</td>  

</tr>  

  1. </tbody>  
  2. </table>  
  3. </form>  
  4. </body>  
  5. </html>  

 

实现步骤:

1.编写form表单input类型为file

2.为页面保存按钮添加onchange事件

3.编写js代码,使用jQuery提交form表单(jQuery.form.js文件,可以自动模拟出一个form表单),请求路径

4.页面编写暂时到这里

二:在后台实现图片的上传

这里使用的是springmvc(注解开发)图片上传

[java] view plain copy
 
  1. package com.wanghang.upload;  
  2.   
  3. import java.io.IOException;  
  4. import javax.servlet.http.HttpServletRequest;  
  5. import javax.servlet.http.HttpServletResponse;  
  6. import org.json.JSONObject;  
  7. import org.springframework.stereotype.Controller;  
  8. import org.springframework.web.bind.annotation.RequestMapping;  
  9. import org.springframework.web.multipart.MultipartFile;  
  10.   
  11. /** 
  12.  * Ajax异步上传图片 
  13.  * 
  14.  * @author Hang.W 
  15.  * @version 1.0, 2017-02-14 00:51:39 
  16.  */  
  17. @Controller  
  18. public class UploadController {  
  19.   
  20.     /** 
  21.      * 使用Ajax异步上传图片 
  22.      *  
  23.      * @param pic 封装图片对象 
  24.      * @param request 
  25.      * @param response 
  26.      * @throws IOException  
  27.      * @throws IllegalStateException  
  28.      */  
  29.     @RequestMapping("/upload/uploadPic.do")  
  30.     public void uploadPic(MultipartFile pic, HttpServletRequest request, HttpServletResponse response) throws IllegalStateException, IOException {  
  31.   
  32.         try {  
  33.             // 获取图片原始文件名  
  34.             String originalFilename = pic.getOriginalFilename();  
  35.             System.out.println(originalFilename);  
  36.           
  37.             // 文件名使用当前时间  
  38.             String name = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());  
  39.           
  40.             // 获取上传图片的扩展名(jpg/png/...)  
  41.             String extension = FilenameUtils.getExtension(originalFilename);  
  42.               
  43.             // 图片上传的相对路径(因为相对路径放到页面上就可以显示图片)  
  44.             String path = "/upload/" + name + "." + extension;  
  45.   
  46.             // 图片上传的绝对路径  
  47.             String url = request.getSession().getServletContext().getRealPath("") + path;  
  48.           
  49.                 File dir = new File(url);  
  50.             if(!dir.exists()) {  
  51.             dir.mkdirs();  
  52.             }  
  53.               
  54.             // 上传图片  
  55.             pic.transferTo(new File(url));  
  56.           
  57.             // 将相对路径写回(json格式)  
  58.             JSONObject jsonObject = new JSONObject();  
  59.             // 将图片上传到本地  
  60.             jsonObject.put("path", path);  
  61.           
  62.             // 设置响应数据的类型json  
  63.             response.setContentType("application/json; charset=utf-8");  
  64.             // 写回  
  65.             response.getWriter().write(jsonObject.toString());  
  66.   
  67.         } catch (Exception e) {  
  68.             throw new RuntimeException("服务器繁忙,上传图片失败");  
  69.         }  
  70.     }  
  71.       
  72. }  

 

图片上传

 

1.springmvc进行参数绑定,但默认是不支持图片上传的,可以在springmvc的配置文件中进行文件上传的配置

2.设置pic形参,接收页面传递的参数

3.普通文件上传代码

4.将图片以json格式写回页面

5.图片上传部分完成

页面图片展示

1.使用jQuery动态获取到<img>标签的id

2.将获取到的json数据赋值到<img>标签的src属性

3.赋值完后,就完成了图片页面无刷新显示

 

 

      来源:http://blog.csdn.net/java__project/article/details/55062816

以上是关于Ajax实现异步上传图片的主要内容,如果未能解决你的问题,请参考以下文章

php+ajax实现异步上传文件或图片功能

ajaxFileUpload异步上传图片,服务器文件叫多,如何删除啊~~

使用Ajax以及Jquery.form异步上传图片

thinkPHP利用ajax异步上传图片并显示删除

TP利用ajax异步上传图片并显示删除

ASP.NET 用AJAX在页面上传头像,不能异步刷新?