1小时，带你前端【上传文件】方法汇总，一篇就够了~

最新推荐文章于 2024-01-04 11:34:22 发布

贪吃ღ大魔王

最新推荐文章于 2024-01-04 11:34:22 发布

阅读量3.3k

点赞数 35

分类专栏：新星计划 javascript 总结文章标签：新星计划 javascript jquery

本文链接：https://blog.csdn.net/weixin_44070254/article/details/117676780

版权

文章目录

上传文件

上传文件

项目中会有很多文件上传的需求，例如：头像上传、表格文件、word文档等…

上传必备表单元素：

<input type="file">

进行文件上传的时候，⭐⭐
1.表单必须是post请求
2.表单必须声明不要对数据进行编码 - enctype=multipart/form-data

传送数据的格式就是键值对的形式，且数据都是js的数据类型，但文件进行传输的时候，只有两种形式去传输：

以字符串的形式去描述一个文件
以文件流的形式去描述一个文件

传统开发模式上传

前后端混在一起开发⭐

传统开发模式的上传需要将表单中选择的文件传送给后端，让后端做上传：

<form action="./upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="avatar">
    <input type="submit" value="上传">
</form>

此时的表单中必须有enctype这个属性，这个属性的说明如下图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FJ4TCM6S-1623079075591)(media/1621737905322.png)]

点击上传按钮后，后端对文件进行上传处理，以php为例：

echo "上传文件名: " . $_FILES["avatar"]["name"] . "<br>";  上传文件的名称
echo "文件类型: " . $_FILES["avatar"]["type"] . "<br>";  上传文件的类型
echo "文件大小: " . ($_FILES["avatar"]["size"] / 1024) . " kB<br>";  上传文件的大小，以字节计
echo "文件临时存储的位置: " . $_FILES["avatar"]["tmp_name"];  存储在服务器的文件的临时副本的名称
echo $_FILES["file"]["error"]  由文件上传导致的错误代码

将文件保存到服务器中：

move_uploaded_file($_FILES["avatar"]["tmp_name"], "upload/" . $_FILES["avatar"]["name"]);
echo "文件存储在: " . "upload/" . $_FILES["avatar"]["name"];

在实际开发中，为了提高效率，通常都会使用前后端分离开发。

前后端分离上传

前端做前端，后端做后端，最终使用接口文档对接 - 核心技术是 ajax

前后端分离开发，应用的主要技术就是ajax。上传同样可以使用ajax来上传。

FormData是js内置的一个构造函数，构造出来的对象可以识别文件信息。

使用方式：

构造FormData对象，将文件信息添加到FormData对象中，然后上传。

文件信息在文件选择控件中：表单.files

例：⭐⭐

<body>
    <input type="file" name="avatar">
    <input type="button" value="上传">
</body

最低0.47元/天解锁文章

贪吃ღ大魔王

关注

35
点赞
踩
36

收藏

觉得还不错? 一键收藏
打赏
78
评论
1小时，带你前端【上传文件】方法汇总，一篇就够了~

文章目录上传文件传统开发模式上传前后端分离上传ajax上传FileReader读取文件jquery上传webWorker离线缓存上传文件项目中会有很多文件上传的需求，例如：头像上传、表格文件、word文档等…上传必备表单元素：<input type="file">进行文件上传的时候，⭐⭐1.表单必须是post请求2.表单必须声明不要对数据进行编码 - enctype=multipart/form-data传送数据的格式就是键值对的形式，且数据都是js的数据类型，但文件进行传.
复制链接

扫一扫