前端文件上传详解-优快云博客

本文链接：https://blog.youkuaiyun.com/I_m_Groot/article/details/88953339

本文深入探讨了前端文件上传的基本原理，包括表单上传的本质及如何使用FormData通过Ajax进行文件上传。文章对比了表单上传与Ajax上传的区别，并揭示了它们在HTTP协议层面的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

重新认识前端上传文件

最近温习了一下前端的基础知识，发现上传文件有点道道，这里目前知道的总结一下，以后会做补充。

表单上传的本质

<form action="" method="post" enctype="multipart/form-data">
    <input type="file" name="myFile">
    <input type="submit">
</form>

如上面的代码，是一个简单的表单上传文件，选择文件后，点击提交按钮，便会请求 action 指定的上传路径，交由后端 cgi 程序处理。在这里注意，需要指定 enctype=“multipart/form-data” 这个字段表示以什么数据编码格式传送给服务端，multipart/form-data 用来文件上传时使用，另外这里 multipart/form-data 是在 post 基础上使用的，所以在此必须指定上传方式为 post。用php 打印 $_FILES 这个遍历看看是什么。下面是 php 代码：

var_dump($_FILES);

下面是打印的结果

array(1) { ["myFile"]=> array(5) { ["name"]=> string(8) "temp.txt" ["type"]=> string(10) "text/plain" ["tmp_name"]=> string(53) "C:\Users\Administrator\AppData\Local\Temp\php6077.tmp" ["error"]=> int(0) ["size"]=> int(0) } }

以上是表单的行为，总结一下，就是设置 method 以及 enctype 字段来进行文件的上传，我们都知道用 ajax 发起请求，我们知道原生的 ajax 发送的请求参数可以是字符串和 FormData 格式，在 jq 里就是设置 data 为对象或者 FormData，我们用 jq的 ajax 发起一次请求，请求上传文件试试，看看会发生什么。下面是前端代码

    <script>
    
    function chooseFile(e) {
        var file = e.target.files[0];
        var formData = new FormData;
        formData.append("file", file);
        $.ajax({
            url: 'add.php',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success (res) {
                console.log(res)
            }
        })
    }

</script>

后端代码不变，我们在选择完文件以后看一下调试工具上的请求信息

可以看到用 ajax 发起的文件请求与用表单发起的请求结果完全一致，也就是说表单的上传文件其实就是用 FormData 上传文件，

只不过封装了过程。也就是说，不论是表单上传，还是利用 ajax 指定 FormData 上传，其实都是 http协议以及浏览器对其实现的使用，所以一定要学好 http