本篇文章给大家带来了关于前端上传文件的相关知识，其中包括传统开发模式上传、前后端分离上传以及ajax上传等等相关问题，希望对大家有帮助。
上传文件
项目中会有很多文件上传的需求，例如：头像上传、表格文件、word文档等…
上传必备表单元素：
进行文件上传的时候，
1.表单必须是post请求
2.表单必须声明不要对数据进行编码 - enctype=multipart/form-data
立即学习“前端免费学习笔记（深入）”；
传送数据的格式就是键值对的形式，且数据都是js的数据类型，但文件进行传输的时候，只有两种形式去传输：
- 以字符串的形式去描述一个文件
- 以文件流的形式去描述一个文件
传统开发模式上传
前后端混在一起开发
传统开发模式的上传需要将表单中选择的文件传送给后端，让后端做上传：
此时的表单中必须有enctype这个属性，这个属性的说明如下图：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FJ4TCM6S-1623079075591)(media/1621737905322.png)]](https://img.php.cn/upload/article/000/000/067/27eb6095ce96be097353cc41613132f4-0.png)
点击上传按钮后，后端对文件进行上传处理，以php为例：
echo "上传文件名: " . $_FILES["avatar"]["name"] . "
"; 上传文件的名称 echo "文件类型: " . $_FILES["avatar"]["type"] . "
"; 上传文件的类型 echo "文件大小: " . ($_FILES["avatar"]["size"] / 1024) . " kB
"; 上传文件的大小，以字节计 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
例：
FormData对象有一个特点，将文件信息添加进去后，直接打印不能看到文件信息，需要使用for of遍历才能看到：
var formdata = new FormData();var fileinfo = document.querySelector('[type="file"]').files[0];formdata.append('avatar',fileinfo) / 将文件信息添加到FormData对象中
console.log(formdata)for(var v of formdata){
console.log(v)}![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w0A4kjb7-1623079075609)(media/1621739596218.png)]](https://img.php.cn/upload/article/000/000/067/401f402fac1827239e95a7519a69dd8b-2.png)
FormData对象中也可以添加别的数据，进行一起提交：
formdata.append('avatar',fileinfo)formdata.append('age',12)for(var v of formdata){
console.log(v)}![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E4L8JjjG-1623079075612)(media/1621739699971.png)]](https://img.php.cn/upload/article/000/000/067/401f402fac1827239e95a7519a69dd8b-3.png)
从FormData对象中删除一个数据，使用：
formdata.delete(键)
有时候，我们在一个表单中需要上传多个文件，此时，FormData中可以不用追加一个文件信息，可以在构造FormData对象的时候，将整个表单对象传入，他会自动识别所有数据：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UfREm9lD-1623079075616)(media/1621739964694.png)]](https://img.php.cn/upload/article/000/000/067/401f402fac1827239e95a7519a69dd8b-4.png)
当使用FormData上传的时候，将FormData对象当做数据传入，不需要修改请求头，浏览器会自动修改。
此时已经实现了前后端分离上传了，但是正常项目中都会有一个预览图片的功能。
我们可以让后端在实现上传后，将上传以后的文件名称传送给前端，让前端渲染返回的图片路径。
但这样是在上传以后预览的，假设我们选择了文件以后，就想看看这个文件是否要上传，也就是在上传之前要预览的话，还是没有办法实现。
我们可以利用H5提供的FileReader来读取文件并预览，然后决定是否要上传。
ajax上传
ajax进行上传后
var xhr = new XMLHttpRequest;
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status>=200 && xhr.status<300){
var res = xhr.responseText;
// console.log(res);
if(res==1){
alert('上传成功')
location.reload()
}
}
}
}
xhr.open('post','2-upload.php')将文件数据放在send中进行传送
需要借助H5提供的构造函数FormData - 用来识别文件信息
var fd = new FormData()
将文件信息放在fd这个对象中 - 用fd的append方法
文件信息在哪里？
var file = document.querySelector('[type="file"]')
// console.dir(file);
var fileinfo = file.files[0] / 文件信息append方法，是将文件放入这个对象中，对象就需要键值对，参数1是键，参数2是文件信息
这是网上分享的第一个带整站数据包的爱之谷模板，希望大家支持开发者“ecshop模板堂”安装方法：1，解压rar包上传到网站根目录2，导入sql数据库文件，到你的数据库里，可以phpmyadmin等软件3，修改data里config.php里面的数据库 用户名 密码等信息 为你自己的数据库信息4，安装完毕之后的后台用户名密码为：后台地址：域名/admin用户名
fd.append('avatar',fileinfo)fd有一个特性，就是直接打印他， 看不到其中的内容 需要遍历才能看到其中的数据 - 必须使用 for of
for(var value of fd){
console.log(value);
}fd除了能添加文件信息，还可以添加数据
fd.append('username',document.querySelector('[name="username"]').value)上传文件的时候，利用FormData，里面就有了数据和文件信息，其实最终文件和数据以二进制数据流进行传送的，不需要设置请求头，因为ajax会自动调整
文件数据其实就是fd
php：
现在能打印出数据，文件存到了临时目录中
上传就是将临时文件移动到服务器中
header("content-type:text/html;charset=utf8");echo "";print_r($_FILES);move_uploaded_file($_FILES['avatar']['tmp_name'],'./upload/'.$_FILES['avatar']['name']);// echo '上传成功';echo './upload/'.$_FILES['avatar']['name'];
echo "
答案：1 3 9 12 4 10 2 11 5 6 8 7
更多编程相关知识，请访问：编程视频！！
