zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    2019 西安邀请赛 D
    time 库
    字符串处理+格式化输出
    数据类型
    turtle1
    格式问题
    字符串1
    基础操作
    链表去重
    PAT 1093
  • 原文地址:https://www.cnblogs.com/kongxc/p/7831837.html
Copyright © 2011-2022 走看看