广告
返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >使用AJAX实现上传文件
  • 852
分享到

使用AJAX实现上传文件

2024-04-02 19:04:59 852人浏览 泡泡鱼
摘要

本文实例为大家分享了使用ajax实现上传文件的具体代码,供大家参考,具体内容如下 需求: 在前端页面选择文件上传到服务器的指定位置 前端代码 <fORM id="upl

本文实例为大家分享了使用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”的话,提交完数据会刷新一次页面。

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

--结束END--

本文标题: 使用AJAX实现上传文件

本文链接: https://www.lsjlt.com/news/154885.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 使用AJAX实现上传文件
    本文实例为大家分享了使用AJAX实现上传文件的具体代码,供大家参考,具体内容如下 需求: 在前端页面选择文件上传到服务器的指定位置 前端代码 <form id="upl...
    99+
    2022-11-12
  • Ajax如何实现异步上传文件
    这篇文章将为大家详细讲解有关Ajax如何实现异步上传文件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体代码如下所示:<!DOCTYPE html>...
    99+
    2022-10-19
  • Ajax怎么实现文件上传功能
    这篇文章主要介绍“Ajax怎么实现文件上传功能”,在日常操作中,相信很多人在Ajax怎么实现文件上传功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Ajax怎么实现文件上传...
    99+
    2022-10-19
  • java使用ajax完成上传文件
    本文实例为大家分享了java使用ajax完成上传文件的具体代码,供大家参考,具体内容如下 使用ajax上传文件最重要的就是实例化FormData来进行上传文件: 1、html代码:...
    99+
    2022-11-13
  • Java使用Ajax异步上传文件
    目录相关代码示例: 另一种示例:相关代码示例: html代码片段: <form class="layui-form" action=...
    99+
    2022-11-12
  • Ajax和form+iframe怎么实现文件上传
    这篇文章将为大家详细讲解有关Ajax和form+iframe怎么实现文件上传,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。HTML5Ajax上传html5的上传实现,是需要file控件以及XMLHttpR...
    99+
    2023-06-08
  • Django之Ajax文件上传
     请求头ContentType     ContentType指的是请求体的编码类型,常见的类型共有3种:     1 application/x-www-form-urlencoded(看下图)       这应该是最常见的 POST ...
    99+
    2023-01-30
    文件上传 Django Ajax
  • 使用jquery和ajax怎么上传文件
    本篇文章为大家展示了使用jquery和ajax怎么上传文件,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。什么是ajaxajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,可以通过在...
    99+
    2023-06-08
  • AjaxFileUpload如何实现单个文件的Ajax文件上传库
    这篇文章将为大家详细讲解有关AjaxFileUpload如何实现单个文件的Ajax文件上传库,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。jQuery.AjaxFileU...
    99+
    2022-10-19
  • iframe中怎么实现Ajax文件上传效果
    本篇文章为大家展示了iframe中怎么实现Ajax文件上传效果,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。复制代码 代码如下:<span >avasc...
    99+
    2022-10-19
  • HTML5+Ajax文件上传进度条怎么实现
    这篇文章主要介绍了HTML5+Ajax文件上传进度条怎么实现,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。原本打算使用jquery插件进行异...
    99+
    2022-10-19
  • jsp+ajax如何实现无刷新上传文件
    这篇文章主要为大家展示了“jsp+ajax如何实现无刷新上传文件”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jsp+ajax如何...
    99+
    2022-10-19
  • Ajax如何实现上传文件进度条Codular
    这篇文章主要介绍了Ajax如何实现上传文件进度条Codular,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。Let's Code我们...
    99+
    2022-10-19
  • 基于ajax的html如何实现文件上传
    这篇文章主要介绍基于ajax的html如何实现文件上传,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1. 怎样自定义样式?1)、只管按照自己喜欢看到的样式去定义即可,如<a h...
    99+
    2022-10-19
  • jQuery中如何实现Ajax方式上传文件
    这篇文章主要介绍jQuery中如何实现Ajax方式上传文件,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!jQuery Ajax方式上传文件用到两个对象第一个对象:FormData第二...
    99+
    2022-10-19
  • Ajax如何实现表单异步上传文件
    这篇文章主要介绍Ajax如何实现表单异步上传文件,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1.起因做前台页面时,需要调用WebAPI的Post请求,发送一些字段和文件(相当于把表...
    99+
    2022-10-19
  • ajax异步如何实现文件分片上传
    这篇文章主要介绍ajax异步如何实现文件分片上传,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!实例代码:<!DOCTYPE html><html lang="en&qu...
    99+
    2023-06-08
  • 使用ajax怎么实现一个拖拽上传文件功能
    本篇文章给大家分享的是有关使用ajax怎么实现一个拖拽上传文件功能,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。<!DOCTYPE html><ht...
    99+
    2023-06-08
  • asp.net中表单上传功能如何实现ajax文件异步上传
    这篇文章主要为大家展示了“asp.net中表单上传功能如何实现ajax文件异步上传”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“asp.net中表单上传功能如何...
    99+
    2022-10-19
  • ajax如何实现无刷新上传文件功能
    这篇文章主要介绍了ajax如何实现无刷新上传文件功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体内容如下<!DOCTYPE HTML><ht...
    99+
    2023-06-08
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作