使用AJAX实现上传文件

 更新时间:2021年10月20日 08:30:36   作者:Accccccccv  
这篇文章主要介绍了使用AJAX实现上传文件,无需任何插件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

本文实例为大家分享了使用AJAX实现上传文件的具体代码,供大家参考,具体内容如下

需求:

在前端页面选择文件上传到服务器的指定位置

前端代码

<form   id="uploadForm"  method="post" enctype="multipart/form-data">
   <label  >上传电子书</label>
   <input type="file"  name="file" >
   <button  id="upload" type="button"  name="button" >上传</button>
</form>
$("#upload").click(function () {
   var formData = new FormData($('#uploadForm')[0]);
   $.ajax({
    type: 'post',
    url: "https://****:8443/fileUpload", //上传文件的请求路径必须是绝对路劲
     data: formData,
     cache: false,
     processData: false,
     contentType: false,
      }).success(function (data) {
        console.log(data);
        alert("上传成功"+data);
        filename=data;
      }).error(function () {
         alert("上传失败");
     });
    });

首先创建一个FormData实例,也就是空对象,将页面中现有form表单将他初始化。通过AJAX提交给后台

后端代码

@PostMapping(value = "/fileUpload")
    @ResponseBody
    public String  fileUpload(@RequestParam(value = "file") MultipartFile file, Model model, HttpServletRequest request) {
        if (file.isEmpty()) {
            System.out.println("文件为空空");
        }
            String fileName = file.getOriginalFilename();  // 文件名
            System.out.println(file.getOriginalFilename());
            String suffixName = fileName.substring(fileName.lastIndexOf("."));  // 后缀名
            String filePath = "C://pdf//"; // 上传后的路径
            fileName = UUID.randomUUID() + suffixName; // 新文件名
            File dest = new File(filePath + fileName);
            System.out.println("pdf文件路径为:"+dest.getPath());
            if (!dest.getParentFile().exists()) {
                dest.getParentFile().mkdirs();
                System.out.println("上传pdf文件+++++++++++");
                System.out.println("pdf文件路径为:"+dest.getPath());
            }
            try {
                file.transferTo(dest);
            } catch (IOException e) {
                e.printStackTrace();
            }
            String filename = "/pdf/" + fileName;
          return fileName;


    }

注意

1.@RequestParam(value = “file”) 中的file需要和input中的name属性一致。
2.提交按钮类型Type=“Button”如果为“submit”的话,提交完数据会刷新一次页面。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。

相关文章

  • AJAX+Servlet实现的数据处理显示功能示例

    AJAX+Servlet实现的数据处理显示功能示例

    这篇文章主要介绍了AJAX+Servlet实现的数据处理显示功能,结合实例形式分析了前台ajax与后台Servlet生成随机数显示的相关交互操作技巧,需要的朋友可以参考下
    2018-06-06
  • Ajax简单的异步交互及Ajax原生编写

    Ajax简单的异步交互及Ajax原生编写

    一提到异步交互大家就会说ajax,仿佛ajax这个技术已经成为了异步交互的代名词.那下面将研究ajax的核心对象
    2016-01-01
  • Ajax四种元素的关系介绍

    Ajax四种元素的关系介绍

    应用程序通过XMLHttpRequest对象以后台的方式从服务器获取数据,通过CSS和DOM改变界面的外观,感兴趣的朋友可以了解下本文
    2014-01-01
  • Ajax的内部实现机制、原理与实践小结

    Ajax的内部实现机制、原理与实践小结

    AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),Ajax不是一个技术,它实际上是几种技术,每种技术都有其独特这处,合在一起就成了一个功能强大的新技术。
    2010-06-06
  • 有关Ajax跨域问题的两种解决方法

    有关Ajax跨域问题的两种解决方法

    ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,会警告,所以才出现ajax跨域的问题。
    2015-10-10
  • 基于Ajax技术实现文件上传带进度条

    基于Ajax技术实现文件上传带进度条

    这篇文章主要介绍了基于Ajax技术实现文件上传带进度条的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • Ajax实现动态加载数据

    Ajax实现动态加载数据

    这篇文章主要为大家详细介绍了Ajax动态加载数据的小例子,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Ajax基础使用详解

    Ajax基础使用详解

    这篇文章主要介绍了Ajax基础使用详解,是前后台交互的能? 也就是我们客户端给服务端发送消息的?具,以及接受响应的?具,本篇就来对ajax基础进行详细讲解,需要的朋友可以参考下
    2023-05-05
  • $.ajax()方法进行网页间传值示例

    $.ajax()方法进行网页间传值示例

    这篇文章主要介绍了$.ajax()方法进行网页间传值的具体实现,需要的朋友可以参考下
    2014-04-04
  • JS AJAX前台如何给后台类的函数传递参数

    JS AJAX前台如何给后台类的函数传递参数

    这篇文章主要介绍了JS AJAX前台给后台类的函数传递参数的方法,下面有个不错的示例,需要的朋友可以参考下
    2014-06-06

最新评论

?


http://www.vxiaotou.com