一个小时带你总结前端上传文件的方法(整理分享) | 您所在的位置:网站首页 › 前端上传图片到后端 › 一个小时带你总结前端上传文件的方法(整理分享) |
本篇文章给大家带来了关于前端上传文件的相关知识,其中包括传统开发模式上传、前后端分离上传以及ajax上传等等相关问题,希望对大家有帮助。上传文件 项目中会有很多文件上传的需求,例如:头像上传、表格文件、word文档等… 上传必备表单元素: 进行文件上传的时候, 1.表单必须是post请求 2.表单必须声明不要对数据进行编码 - enctype=multipart/form-data 传送数据的格式就是键值对的形式,且数据都是js的数据类型,但文件进行传输的时候,只有两种形式去传输: 以字符串的形式去描述一个文件以文件流的形式去描述一个文件传统开发模式上传前后端混在一起开发 传统开发模式的上传需要将表单中选择的文件传送给后端,让后端做上传: 此时的表单中必须有enctype这个属性,这个属性的说明如下图: 点击上传按钮后,后端对文件进行上传处理,以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 例: document.querySelector('[type="button"]').onclick = function(){ console.log(document.querySelector('[type="file"]').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)}FormData对象中也可以添加别的数据,进行一起提交: formdata.append('avatar',fileinfo)formdata.append('age',12)for(var v of formdata){ console.log(v)}从FormData对象中删除一个数据,使用: formdata.delete(键)有时候,我们在一个表单中需要上传多个文件,此时,FormData中可以不用追加一个文件信息,可以在构造FormData对象的时候,将整个表单对象传入,他会自动识别所有数据: document.querySelector('[type="button"]').onclick = function(){ var formdata = new FormData(document.querySelector('form')); for(var v of formdata){ console.log(v) }}当使用FormData上传的时候,将FormData对象当做数据传入,不需要修改请求头,浏览器会自动修改。 此时已经实现了前后端分离上传了,但是正常项目中都会有一个预览图片的功能。 我们可以让后端在实现上传后,将上传以后的文件名称传送给前端,让前端渲染返回的图片路径。 但这样是在上传以后预览的,假设我们选择了文件以后,就想看看这个文件是否要上传,也就是在上传之前要预览的话,还是没有办法实现。 我们可以利用H5提供的FileReader来读取文件并预览,然后决定是否要上传。 ajax上传ajax进行上传后 var xhr = new XMLHttpRequest; xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if(xhr.status>=200 && xhr.status |
CopyRight 2018-2019 实验室设备网 版权所有 |