zoukankan      html  css  js  c++  java
  • Ajax请求+上传下载Demo

    1.流程解析:

    1. 前端用<input tye="file">标签读取本地的文件对象;
    2. 前端用FormData()对象封装文件对象和其他信息,异步请求改成false,async=false;
    3. 后端通过Multipart对象接收文件对象;
    4. 后端创建存储文件夹——创建空文件对象——用transferTo把文件内容写入空文件对象中——获取文件路径写入数据库——上传完成——返回结果到前端
    5. 下载实现的原理主要是修改请求头setHeader使浏览器弹出下载框,实现下载功能。

    2.前端(html+jquery):

    <!DOCTYPE html>
    <html>
      <head>
        <title>post.html</title>
        
        <meta name="keywords" content="keyword1,keyword2,keyword3">
        <meta name="description" content="this is my page">
        <meta name="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery.min.js"></script>
        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    
      </head>
      
      <body>
        <form action="/ssm/study/upload" method="post" enctype="multipart/form-data">
            <input type="file" name="file" id = "file" required="required"><br>
            user:<input type="text" name="user" id = "user" value = "liguochao"><br>
            <input type="button" value="send" onclick = "send()"><br>
        </form>
        <div id="lists">
            
        </div>
      </body>
      <script type="text/javascript">
     /* 上传 */
          function send(){    
              var file = $("#file")[0].files[0];//获取文件
              console.log("file:"+file);
              var user = $("#user");//获取user信息
            var formData = new FormData();
            formData.append("file", file);
            formData.append("user",user);
             $.ajax({
                    type:"post",
                    async: false,                                    
                    processData : false, // 使数据不做处理
                    contentType : false, // 不要设置Content-Type请求头
                    url: "/ssm/study/upload",
                    data:formData,
                    dataType:"json",
                    success: function(result){
                        var files = result;
                           document.getElementById("lists").innerHTML = null;
                           for (var i = 0; i < files.length; i++) {
                            var name = files[i].name;//文件名
                            var path = files[i].path;//文件路径
                               var html = "<p>"+(i+1)+"-<a href='#' onclick='downloadFile(""+path+"")'>"+name+"</a></p>";
                               $("#lists").append(html);
                        }
                   }
                });
               }
      
    /* 下载 */
        function downloadFile(path){
            path = path.replace("#", "%23");
            name = name.replace("#", "%23");
            var uri = "/ssm/study/download?path=" + encodeURIComponent(path) + "&name=" + encodeURIComponent(name);
            var w = window.open("", "_self");
            w.location.href = uri;
        }
      </script>
    </html>

    3.后端(springMVC)

    package com.study.controller;
    import java.io.File;
    import java.io.FileInputStream;
    import java.io.FileNotFoundException;
    import java.io.IOException;
    import java.io.OutputStream;
    import java.util.ArrayList;
    import java.util.Date;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import org.springframework.stereotype.Controller;
    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("study")
    public class UploadController {
        /**上传
         * @param file 文件对象
         * @param user 用户名
         * @return
         * @throws IOException
         */
        @ResponseBody
        @RequestMapping("upload")
        public List<Map<String,Object>> upload(@RequestParam("file") MultipartFile file,@RequestParam("user") String user) throws IOException,FileNotFoundException {
            System.out.println("上传文件,user:"+user+"getContentType"+file.getContentType()+"getName:"+file.getName()+"getOriginalFilename:"+file.getOriginalFilename());
            System.out.println("getSize:"+file.getSize()+"getBytes:"+file.getBytes()+"getInputStream:"+file.getInputStream()+"isEmpty:"+file.isEmpty());
            Integer result = 0;
            if (file.isEmpty()) {return null;}
            /* 创建父文件夹 */
            String folder = "D:/files";
            File parent = new File(folder);
            if (!parent.exists()) {
                parent.mkdirs();
            }
            /* 创建文件 */
            File tempFile = new File(parent,user+"-"+new Date().getTime()+"-"+file.getOriginalFilename());
            System.out.println(tempFile.getAbsolutePath());
            tempFile.createNewFile();
            file.transferTo(tempFile.getAbsoluteFile());
            /* 查找文件夹列表 */
            List<Map<String, Object>> files = new ArrayList<Map<String, Object>>();
            Map<String, Object> map;
            String[] fileNames = parent.list();
            for (int i = 0; i < fileNames.length; i++) {
                String name = fileNames[i].substring(fileNames[i].indexOf("-")+1); 
                map = new HashMap<String, Object>();
                map.put("name",name);
                map.put("path","D:/files"+"/"+fileNames[i]);
                files.add(map);
            }
            return files;
        }
        
        /**下载
         * @param request
         * @param response
         * @throws IOException 
         */
        @RequestMapping("download")
        public void download(HttpServletRequest request,HttpServletResponse response) throws IOException {
            String path = java.net.URLDecoder.decode(request.getParameter("path"),"utf-8");
            String name = java.net.URLDecoder.decode(request.getParameter("name"),"utf-8");
            System.out.println("path:"+path);System.out.println("name:"+name);
            /* 过滤文件格式 */
            String tname = path;
            System.out.println("tname:"+tname);
            String name_hz = tname.substring(tname.lastIndexOf("."));
            if (name_hz.equals(".xls") || !name_hz.equals(".xls")) {}
            /* 查找服务器文件路径,创建对象 */
            File serverfile = new File(path);
            /* 判断是否为能供下载的文件夹路径下的文件 */
            /* 该步是最关键的一步,使用setHeader()方法弹出"是否要保存"的对话框,打引号的部分都是固定的值,不要改变 */
            response.setHeader ("Content-disposition", "attachment;filename=" + new String (tname.getBytes ("gb2312"), "ISO8859-1"));
            /* 设置返回的文件格式,可有可无 */
    //        if(path.endsWith("xls")||path.endsWith("xlsx"))response.setContentType ("application/vnd.ms-excel");
    //        else if(path.endsWith("ppt")||path.endsWith("pptx"))response.setContentType ("application/vnd.ms-powerpoint");
    //        else response.setContentType ("application/msword");
            /* 定义下载文件的长度 /字节 */
            long fileLength = serverfile.length ();
            String length = String.valueOf (fileLength);
            /* 设置文件长度(如果是Post请求,则这步不可少) */
            response.setHeader ("content_Length", length);
            /* 获得一个 ServletOutputStream(向客户端发送二进制数据的输出流)对象 */
            OutputStream servletOutPutStream = response.getOutputStream ();
            /* 获得一个从服务器上的文件myFile中获得输入字节的输入流对象 */
            FileInputStream fileInputStream = new FileInputStream (serverfile);
            /* 设置缓冲区为1024个字节,即1KB */
            byte bytes[] = new byte[1024];
            int len = 0;
            /* 读取数据。返回值为读入缓冲区的字节总数,如果到达文件末尾,则返回-1 */
            while ((len = fileInputStream.read (bytes)) != -1) {
                // 将指定 byte数组中从下标 0 开始的 len个字节写入此文件输出流,(即读了多少就写入多少)
                servletOutPutStream.write (bytes, 0, len);
            }
            /* 关闭输出流,输入流 */
            servletOutPutStream.close ();
            fileInputStream.close ();
        }
    }

    4.xml配置(配置上传文件的大小限制)

    <?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop"
        xmlns:tx="http://www.springframework.org/schema/tx" xmlns:jdbc="http://www.springframework.org/schema/jdbc"
        xmlns:context="http://www.springframework.org/schema/context"
        xmlns:mvc="http://www.springframework.org/schema/mvc"
        xsi:schemaLocation="http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-3.0.xsd
            http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
            http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
            http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd
            http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd 
            http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd">
        <context:annotation-config/>
    
        <context:component-scan base-package="com.how2java.controller">
              <context:include-filter type="annotation" 
              expression="org.springframework.stereotype.Controller"/>
        </context:component-scan>
    
        <mvc:annotation-driven >
           <mvc:message-converters register-defaults="true">
              <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                 <property name="supportedMediaTypes" value="text/plain;charset=UTF-8" />
              </bean>
           </mvc:message-converters>    
        </mvc:annotation-driven>
        
        <mvc:default-servlet-handler />
    
    
        <bean
            class="org.springframework.web.servlet.view.InternalResourceViewResolver">
            <property name="viewClass"
                value="org.springframework.web.servlet.view.JstlView" />
           <!--  <property name="prefix" value="/WEB-INF/jsp/" />
            <property name="suffix" value=".jsp" /> -->
        </bean>
        
            <!-- 定义文件上传解析器 -->
        <bean id="multipartResolver"
            class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
            <!-- 设定默认编码 -->
            <property name="defaultEncoding" value="UTF-8"></property>
            <!-- 设定文件上传的最大值5MB,50*1024*1024 -->
            <property name="maxUploadSize" value="52428800"></property>
        </bean>
    </beans>
  • 相关阅读:
    PSFTP使用简单教程
    JavaMail应用--通过javamail API实现在代码中发送邮件功能
    java常用数据类型转换
    自己封装的Java excel数据读取方法
    java怎样实现重载一个方法
    怎样做好测试保证交付产品质量
    软件测试之测试用例颗粒度问题
    Python 一句命令启动一个web服务器
    ansible 模块之在学习--lineinfile
    centos 7 安装sql 审核工具 inception + archer
  • 原文地址:https://www.cnblogs.com/gdou/p/11790600.html
Copyright © 2011-2022 走看看