重新认识前端上传文件

本文深入探讨了前端文件上传的基本原理,包括表单上传的本质及如何使用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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值