zoukankan      html  css  js  c++  java
  • Spring使用ajax异步上传文件

    博客已迁移到CSDN《https://blog.csdn.net/qq_33375499

    单文件上传
    <!-- 创建文件选择框 -->
    文件上传 :<input type="file" id="file" name="filename" />

    AJAX获取数据并进行上传:

    // 创建formData对象,用于保存ajax上传的参数信息
     var formData = new FormData();
    // 获取要上传的文件file
    var files = document.getElementById("file").files;
    if(files.length <= 0){
        alert("请选择文件");
        return;
    }
    var file = files[0];
    // 将文件添加到formData对象中
    formData.append("file",file);
    // ajax 异步上传
    $.ajax({
      type:"post",
      url:"upload.do",// 上传请求url
      data:formData,// 上传参数
      processData : false,// 必须,设置不转换为string,默认为true
      contentType : false,
      success:function(data){
         alert("上传成功");
      },
      error:function(e){
        alert("上传失败");
      }
    });
    

    后台数据接收action(controller)代码

    第一种:使用Springmvc自带注解接收文件

    @RequestMapping("upload.do")
    
    public void upload(@RequestParam(value="file")MultipartFile file) throws Exception {// 使用RequestParam注解接收参数,value值为formData中文件对应的key值
      // 文件名称
      file.getOriginalFilename();
      // 文件字节数组   file.getBytes();

      ... }

    第二种:用HttpServletRequest接收文件

    @RequestMapping("upload.do")
    
    public void upload() throws Exception {
      MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request;// request转换
      MultipartFile file = multipartHttpServletRequest.getFile("file"); // 参数为fromData中文件的key值
      // 文件名称
      file.getOriginalFilename();
    
      // 文件字节数组
      file.getBytes();
    
      ...
    
    }
    

      

    多文件上传

    <!-- 创建文件选择框 -->
    文件上传1 :<input type="file" id="file1" name="filename" />
    文件上传2 :<input type="file" id="file2" name="filename" />
    文件上传3 :<input type="file" id="file3" name="filename" />

    AJAX获取数据并进行上传:

    // 创建formData对象,用于保存ajax上传的参数信息
     var formData = new FormData();
    // 获取要上传的文件file
    var files = document.getElementsByName("filename");
    for (var i = 0, len = files.length; i < len; i++){
      var fs = files[i].files;
      if(fs.length <= 0){
        alert("请先上传文件");
        return;
      }
      // 将文件添加到formData对象中
      formData.append("files",fs[0]);
    }
    // ajax 异步上传
    $.ajax({
      type:"post",
      url:"upload.do",// 上传请求url
      data:formData,// 上传参数
      processData : false,// 必须,设置不转换为string,默认为true
      contentType : false,
      success:function(data){
         alert("上传成功");
      },
      error:function(e){
        alert("上传失败");
      }
    });
    

      

    后台数据接收action(controller)代码

    第一种:使用Springmvc自带注解接收文件

    @RequestMapping("upload.do")
    public void upload(@RequestParam(value="files")MultipartFile[] files) throws Exception {// 使用RequestParam注解接收参数,value值为formData中文件对应的key值
      for(int i = 0,len = files.length; i < len; i++){
        // 文件名称     files[i].getOriginalFilename();
        // 文件字节数组     files[i].getBytes();
      }
      ... }

    第二种:用HttpServletRequest接收文件

    @RequestMapping("upload.do")
    public void upload() throws Exception {
      MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request;// request转换
      MultipartFile[] files = multipartHttpServletRequest.getFiles("files"); // 参数为fromData中文件的key值
      for(int i = 0,len = files.length; i < len; i++){
        // 文件名称
        files[i].getOriginalFilename();
        // 文件字节数组     files[i].getBytes();
      }
      ... 
    }

      

  • 相关阅读:
    Javascript 面向对象编程
    搜狗2013面试题——求页面中所有单词的个数
    jQuery的ready函数需要注意的细节
    js冒泡排序
    jQuery基本框架解析
    数据结构与算法汇总
    唯美的图片网站
    JavaScript中的setInterval用法
    DOCTYPE
    js实现快速排列
  • 原文地址:https://www.cnblogs.com/www-123456/p/9400590.html
Copyright © 2011-2022 走看看