Ajax上传文件(原生JS篇)

工作中用到了Ajax上传文件的情景
之前自己不知道ajax可以传
通过文档发现XHR2.0已经支持了 但需要集合ForData

目录结构
test 一级
files 二级 index.html 二级 saveFiles.php 二级

示例(根据上传文件的进度生成进度条)代码如下
HTML部分

    <div class="progress">
        <div class="step"></div>
    </div>
    <form action="">
        <input type="text" name="name" placeholder="请输入姓名">
        <input type="text" name="skill" placeholder="请输入技能">
        <input type="file" name="icon">
    </form>
    <input type="button" value="ajax2.0">

CSS部分

    <style>
        .progress {
            width: 300px;
            height: 20px;
            border: 1px solid hotpink;
            border-radius: 20px;
            overflow: hidden;
        }

        .step {
            height: 100%;
            width: 0;
            background: greenyellow;
        }
    </style>

javascript部分

<script>
    //  如果我们要使用 ajax2.0 结合FormData 来提交数据 必须使用 post
    document.querySelector("input[type=button]").onclick = function () {
        //1.创建对象
        var xhr = new XMLHttpRequest();
        //2.设置请求行(get请求数据写在url后面)
        xhr.open("post", "./saveFiles.php");
        //3.设置请求头(get请求可以省略,post不发送数据也可以省略)
        // 如果使用的时 formData可以不写 请求头 写了 无法正常上传文件
        //  xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //3.5注册回调函数
        xhr.onload = function () {
            console.log(xhr.responseText);
        }
        // XHR2.0新增 上传进度监控
        xhr.upload.onprogress = function (event) {
            //  console.log(event);
            var percent = event.loaded / event.total * 100 + "%";
            console.log(percent);
            // 设置 进度条内部step的 宽度
            document.querySelector(".step").style.width = percent;
        }
        // XHR2.0新增 
        var data = new FormData(document.querySelector("form"));
        //4.请求主体发送(get请求为空，或者写null，post请求数据写在这里，如果没有数据，直接为空或者写null)
        xhr.send(data);
    }
</script>

PHP部分

<?php     
// 获取提交的文件信息
    print_r($_FILES); 


    // 保存上传的数据
    move_uploaded_file($_FILES["icon"]["tmp_name"],"./files/".$_FILES["icon"]["name"]);
?>

阅读更多