利用FormData对象实现AJAX文件上传功能及后端实现
FE
HTML
基础的设置:
<form enctype="multipart/form-data"><input id="file" type="file" multiple="multiple" name="file" accept="..."><input type="submit" value="上传">
</form>
复制代码
Form的enctype属性
enctype这个属性管理的是表单的MIME编码,它一共有三个属性:
值 | 描述 |
---|---|
application/x-www-form-urlencoded | 在发送前编码所有字符(默认) |
multipart/form-data | 不对字符编码,用来制定传输数据的特殊类型,如mp3、jpg |
text/plain | 纯文本传输 |
因此,传输完整的文件数据需要multipart/form-data
属性。
Input
value
保存了用户指定的文件的名称。
type="file"
设置input类型为file。
multiple="multiple"
可多选,不设置为单选。
accept="..."
设置可选文件的MIME_type。在设置之后点击选择文件按钮会默认显示符合设置的MIME_type的文件(存在兼容性)。具体的文件类型对应的MIME类型可以搜索到,这里列出我用到的类型:
文件类型 | MIME类型 |
---|---|
.txt | text/plain |
application/pdf | |
.doc | application/msword |
.docx | application/vnd.openxmlformats-officedocument.wordprocessingml.document |
.xls | application/vnd.ms-excel |
.ppt | application/vnd.ms-powerpoint |
.pptx | application/vnd.openxmlformats-officedocument.presentationml.presentation |
效果
太丑,不能忍...
CSS
默认界面会在选择文件按钮后会跟一个显示文件名的文本区域,选择文件按钮无法编辑。 我修改的方法是将input框隐藏,再设置一个lable标签使用户点击lable标签时触发选择文件按钮。
<label for="file">选择文件</label>
复制代码
效果
JS
在使用from提交时,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。
为安全起见,
<input type="file">
即file-upload 元素不允许 HTML 作者或 JavaScript 程序员指定一个默认的文件名。HTML value 属性被忽略,并且对于此类元素来说,value属性是只读的,这意味着只有用户可以输入一个文件名。当用户选择或编辑一个文件名时,file-upload 元素触发 onchange 事件句柄。
利用form提交会导致页面刷新,体验不好,所以使用AJAX进行文件上传是个不错的选择。但这需要我们自己来组织通过POST请求发送的内容。
FormData对象
通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据,因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同。 —— MDN web docs
创建FormData对象
let formData = new FormData();
复制代码
向实例化对象中添加文件字段
let myFile = document.getElementById('file');
// myFile.file[0]为第一个文件(单选),多个文件(多选)则要循环添加
formData.append('myFile', myFile.files[0]);
复制代码
console.log(myFile.files[0]);
复制代码
其中size属性单位是byte(字节),即b。
添加自定义字段
formData.append('username', 'simmzl');
复制代码
AJAX发送
let request = new XMLHttpRequest();
request.open("POST", "http://foo.com/foo.php");
request.send(formData);
复制代码
不使用FromData对象
不使用FormData对象的情况下,需要通过AJAX序列化和提交表单 : Using nothing but XMLHttpRequest
PHP
接收
全局数组 $_FILES
,第一个参数是表单的 input name,第二个下标是 "name", "type", "size", "tmp_name" 或 "error"。可以根据这些属性做相关限制,如限制文件大小、文件类型等。
值 | 描述 |
---|---|
name | 文件名 |
type | 文件的MIME类型 |
size | 以字节Byte为单位的文件大小 |
tmp_name | PHP接收文件会存为暂时文件,如需保存到指定路径还要移动这个暂时文件才可以 |
error |
1-7 代表7种不同错误类别以及0 代表成功
|
error: 成功:0(UPLOAD_ERR_OK) 失败:
- 超过了配置文件上传文件的大小
- 超过了表单设置上传文件的大小
- 文件部分被上传
- 没有文件被上传
- 没有找到临时目录
- 文件不可写
- 由于PHP的扩展程序中断了文件上传
验证
上传文件是通过POST发送的,is_uploaded_file(file)
函数可以判断指定的文件是否是通过 HTTP POST 上传的,返回布尔值。
该函数可以用于确保恶意的用户无法欺骗脚本去访问本不能访问的文件,例如 /etc/passwd。 这种检查显得格外重要,如果上传的文件有可能会造成对用户或本系统的其他用户显示其内容的话。
保存
上传的文件暂存在tmp_name中,需要使用move_uploaded_file(file,newlocation)
将上传的文件移动到指定路径,返回布尔值。
if( move_uploaded_file($tmp_name, $destination) ) {echo "文件上传成功";
}else{echo "文件移动失败";
}
复制代码
删除
使用unlink(filepath)
删除文件,参数是文件路径。
拓展功能
当然除了接收、验证、保存和删除这四个基本操作外,还可以添加诸如将文件路径存入数据库、生成文件列表等功能,视需求而定。
最初发表于blog.simmzl.cn
利用FormData对象实现AJAX文件上传功能及后端实现相关推荐
- html5 ajax 文件上传,html5+FormData 实现ajax文件上传
大家都知道在html4时代,上传只能使用表单post提交方式,无法使用ajax(XMLHttpRequest )直接进行表单提交.但在HTML 5的概念形成后,W3C开始考虑标准化XMLHttpReq ...
- php用ajaxs上传图片_php+ajax实现图片文件上传功能实例
目前常用的异步文件上传功能有几种,比较多见的如使用iframe框架形式,ajax功能效果,以及flash+php功能,下面介绍ajax与iframe实现异步文件上传的功能的例子. 方法一,利用jque ...
- php利用ajax文件上传,如何在PHP中利用AjaxForm实现一个文件上传功能
如何在PHP中利用AjaxForm实现一个文件上传功能 发布时间:2020-12-18 14:52:38 来源:亿速云 阅读:94 作者:Leah 如何在PHP中利用AjaxForm实现一个文件上传功 ...
- html5表单提交json数据库,使用html5的FormData对象,通过 Ajax表单异步提交文件数据...
每次在向服务器提交文件对象数据是,总是需要借助各种三方插件来实现表单异步提交功能,还要为不同的界面去定制不同的插件css,相当繁琐.XMLHttpRequest Level 2 添加了一个新的接口-- ...
- php中file对象实例,AJAX_File, FileReader 和 Ajax 文件上传实例分析(php),File FileReader 可以干什么? Ajax - phpStudy...
File, FileReader 和 Ajax 文件上传实例分析(php) File FileReader 可以干什么?Ajax文件上传例子 FileReader 对象可以读取文件的 Base64编码 ...
- 实现一个Ajax模式的文件上传功能有多难?
如题所示,实现一个Ajax模式的文件上传有多难?这并不是一个疑问句,这是一个反问句. 在这里我先声明,不要认为一提到Ajax就是讲XHttpRequest, Ajax还要包括基于frame的操作,对! ...
- ajax文件上传data,ajax文件上传-FormData()
HTML: JS: $("input[type='button']").on('click', upfile); /** * [upfile 文件上传] * @return {[O ...
- ajax 上传文件实例,jquery ajax实现文件上传功能实例代码
下面看下ajax实现文件上传 没有使用插件 一.单文件上传 文件: 上传文件 $(function () { $("#upload").click(function () { va ...
- FormData+Ajax文件上传
$.ajax({url:"",data:{},contentType:false,//必填processData:false,//必填type:"POST",s ...
最新文章
- Jmeter 可视化监控
- 《c语言从入门到精通》看书笔记——第3章 数据类型
- 【DeepLearning】Exercise:Learning color features with Sparse Autoencoders
- 1007. 素数对猜想
- 使用Pycharm的一些错误
- linux内存操作--ioremap和mmap
- Flash 与 JavaScript的交互总结
- 7-211 求前缀表达式的值 (25 分)
- html自动增加一行并获取行号,javascript开发系列(table操作,table增加一行,删除一行,取行号,列号)...
- matlab基于瑞利信道,一种基于MATLAB的瑞利信道仿真方法研究
- python绘制直方图显示数字_Python实现柱状图【数字精准展示,使用不同颜色】
- express搭建的nodejs项目使用webpack进行打包
- qt中添加注释的快捷键_Qt Creator快捷键
- 可以联机的计算机游戏,多人玩的游戏_可以多人联机玩的游戏 乐游网
- php代码访问记录系统,对某PHP发卡系统代码审计记录
- C++ strcpy、strcat、strcmp和strlen的实现
- 网线品质差的三大影响
- 搭建网络流量监控cacti
- Qt之超简单的TCP通信(自定义TCP通信类,含源码+注释)
- Bloom Filter与Cuckoo Filter
热门文章
- python 二维强度图_荐 python数据分析matplotlib库使用之二维图形绘制
- mysql多表内连接查询
- hiveserver2启动不起来_给爱车配个充电宝,70迈汽车应急启动电源,让你远离搭电小广告...
- leetcode402. 移掉K位数字
- 学点数学(3)-函数空间
- C++ primer第六章6.5函数的学习 之特殊用途的语言特性
- Java 计算两个日期之间的相差天数
- 富人和穷人的对比图,时刻提醒自己!
- 不花钱就补足营养的8妙招
- 音视频互动平台--P2P通信技术