Ajax实现文件上传

最新推荐文章于 2024-07-15 15:38:12 发布

橘子汽水&白茶乌龙

最新推荐文章于 2024-07-15 15:38:12 发布

阅读量5.5w

点赞数 12

分类专栏：前端文章标签： Ajax文件上传页面不刷新文件上传 Ajax实现文件上传 FromData实现文件上传文件上传

本文链接：https://blog.csdn.net/fakergoing/article/details/81568002

版权

前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

Ajax实现文件上传时通过FormData实现的

FormData

概述

FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。

构造函数

创建一个formData对象实例有几种方式

1、创建一个空对象实例

var formData = new FormData();

此时可以调用append()方法来添加数据

这里简单的介绍一下FormData，有兴趣的朋友可以自己私下看看；

下面给大家介绍两种实现文件上传

1：没使用插件，单个文件的上传（注意：ajax实现文件上传的话用到的是：绝对路径）

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 
 <title></title> 
</head> 
<body> 
       <form id="uploadForm" enctype="multipart/form-data"> 
             文件:<input id="file" type="file" name="file"/> 
       </form> 
            <button id="upload">上传文件</button> 
</body> 
      <script type="text/javascript"> 
             $(function () { 
               $("#upload").click(function () { 
               var formData = new FormData($('#uploadForm')[0]); 
                $.ajax({ 
                type: 'post', 
                url: "http://192.168.1.101:8080/springbootdemo/file/upload", //上传文件的请求路径必须是绝对路劲
                data: formData, 
                cache: false, 
                processData: false, 
                contentType: false, 
            }).success(function (data) { 
                alert(data); 
           }).error(function () { 
                alert("上传失败"); 
       }); 
    }); 
 }); 
</script> 
</html>

2：Ajax实现多文件的上传（这个是多选上传，关键是multiple="multiple"这个属性，另外使用的接口也是多文件上传的接口）

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 
 <title></title> 
</head> 
<body> 
        <form id="uploadForm" enctype="multipart/form-data"> 
             文件:<input type="file" name="file" multiple="multiple"/><br> 
        </form> 
            <button id="upload">上传文件</button> 
</body> 
<script type="text/javascript"> 
         $(function () { 
             $("#upload").click(function () { 
              var formData = new FormData($('#uploadForm')[0]); 
          $.ajax({ 
          type: 'post', 
              url: "http://192.168.1.101:8080/springbootdemo/file/uploadFiles", 
              data: formData, 
              cache: false, 
              processData: false, 
              contentType: false, 
         }).success(function (data) { 
            alert(data); 
         }).error(function () { 
             alert("上传失败"); 
          }); 
     }); 
 }); 
</script> 
</html>

这边都是前端代码，后台代码也之间简单的文件上传用法一样。