通过Ajax上传文件

最新推荐文章于 2022-02-07 10:30:22 发布

blueFlames

最新推荐文章于 2022-02-07 10:30:22 发布

阅读量354

点赞数 2

分类专栏： js_JQuery javscript 文章标签：通过Ajax进行文件

本文链接：https://blog.csdn.net/blueFlames/article/details/78230088

版权

js_JQuery 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

javscript

1 篇文章 0 订阅

订阅专栏

通过Ajax上传文件

简单介绍下我接触这个新技术的过程

一直都是用Ajax发送数据给服务器，再对返回的数据进行页面渲染，但一直都没有涉及到文件的上传；
后来由于工作的需要，我通过文档了解到了发现XHR2.0已经支持了（需要集合Formdata）
具体如下演示

1.原生JS通过Ajax上传文件

DEMO

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h2>图片上传并预览</h2>
    <form action="">
            <input name='icon' type="file">
    </form>

    <!-- src 目前还没有值 -->
    <img src="" alt="">
</body>
</html>
<script  src="./js/jquery-1.12.4.js"></script>
<script>
    /* js
    document.querySelector('input').onchange = function(){
        //1.创建对象
        var xhr = new XMLHttpRequest();
        //2.设置请求行(get请求数据写在url后面)
        xhr.open('post','./upload.php');
        //3.设置请求头(get请求可以省略,post不发送数据也可以省略)
        // FormData 不能设置请求头
        //3.5注册回调函数
        xhr.onload = function(){
            console.log(xhr.responseText);
            document.querySelector('img').src=xhr.responseText;
        }
        //4.请求主体发送(get请求为空，或者写null，post请求数据写在这里，如果没有数据，直接为空或者写null)
        var data = new FormData(document.querySelector('form'));
        xhr.send(data)
    }

2.原生JQuery通过Ajax上传文件

DEMO

 $(function(){
      // 绑定改变事件
      $('input').change(function(){
        // 获取FormData jQuery中有一个 dom的伪数组
        var formData = new FormData($('form')[0]);
        //   console.log(this);
        $.ajax({
            url:'./upload.php',
            type:'post',
            data:formData,
            contentType: false,// 当有文件要上传时，此项是必须的，否则后台无法识别文件流的起始位置
            processData: false,// 是否序列化data属性，默认true(注意：false时type必须是post
            success:function(data){
                console.log(data);
                $('img').attr('src',data);
            }
        })
      })
    })