PHP使用HTML5 FileApi实现Ajax上传文件功能示例
时间:2022-07-27
本文章向大家介绍PHP使用HTML5 FileApi实现Ajax上传文件功能示例,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例讲述了PHP使用HTML5 FileApi实现Ajax上传文件功能。分享给大家供大家参考,具体如下:
FileApi是HTML5的一个新特性,有了这个新特性,js就可以读取本地的文件了,然后实现真正的Ajax上传文件了,而不是iframe方法,下面会介绍api的使用,以及实现Ajax上传文件:
FileApi使用
定义上传控件:
<input type="file" name="pic" onchange="selfile();" /
当上传文件后,就会触发selfile()
函数,selfile()
代码:
var files = document.getElementsByTagName('input')[0].files;//fileList对象,文件列表对象,表示有多个文件被上传,如果只有1个文件上传也是fileList对象
var files = document.getElementsByTagName('input')[0].files[0];//file对象,表示单个上传文件
Ajax上传文件
效果图:
项目结构图:
11-fileApi.html文件:
页面中主要有一个上传文件按钮,如果有文件上传,onchange事件被响应,selfile函数调用,然后js读取上传文件、把文件名和大小显示在页面中、创建FormData对象并添加数据、ajax上传文件、预览上传文件效果。
<!DOCTYPE html
<html
<head
<meta charset="utf-8"
<meta http-equiv="X-UA-Compatible" content="IE=edge"
<title fileApi实现Ajax上传文件</title
<link rel="stylesheet" href=""
<script
function selfile(){
var file = document.getElementsByTagName('input')[0].files[0];//js读取上传文件
var con = '';
con += '文件名:' + file.name + '<br/ ';
con += '大小:' + file.size;
document.getElementById('debug').innerHTML = con;//把文件名和大小显示在页面中
var fd = new FormData();//创建FormData对象
fd.append('pic',file);//添加文件数据
//ajax上传文件
var xhr = new XMLHttpRequest();
xhr.open('POST','11-fileApi.php',true);
xhr.send(fd);
var img = document.createElement('img');//动态创建img标签
img.src = window.URL.createObjectURL(file);//把二进制对象直接读出浏览器显示的资源
document.getElementsByTagName('body')[0].appendChild(img);//把img标签动态添加到dom树中
}
</script
</head
<body
<input type="file" name="pic" onchange="selfile();" /
<div id="debug" </div
</body
</html
11-fileApi.php文件:
首先判断是否有文件上传,然后判断上传是否成功,最后把文件复制到当前目录下的upload目录下,文件名保持不变。
<?php
/**
* fileApi实现Ajax上传文件
* @author webbc
*/
if(empty($_FILES)){
exit('no file');
}
if($_FILES['pic']['error'] !== 0){
exit('fail');
}
move_uploaded_file($_FILES['pic']['tmp_name'],'./upload/'.$_FILES['pic']['name']);
?
- 表单验证和正则表达式
- ELK日志系统:Elasticsearch + Logstash + Kibana 搭建教程
- 兰花协议—让世界自由的互联网
- Git(二)Git几个区的关系与Git和GitHub的关联
- maven/gradle 打包后自动上传到nexus仓库
- bash/shell编程学习(1)
- Git(一)之基本操作详解
- JavaScript中的函数基础
- JS魔法堂:判断节点位置关系
- bash/shell编程学习(3)
- Tomcat配置Web程序几种方式
- java并发编程学习: 守护线程(Daemon Thread)
- HTML条件注释判断浏览器及检验
- HttpClient(二)HttpClient使用Ip代理与处理连接超时
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 前端国际化辅助工具——自动替换中文并翻译
- Codeforces Round #613 (Div. 2)A. Mezo Playing Zoma
- PAT (Advanced Level) Practice 1096 Consecutive Factors (20 分)
- Codeforces Round #613 (Div. 2)B. Just Eat It!
- java线程池(六):ForkJoinPool源码分析之二(WorkQueue源码)
- Codeforces Round #605 (Div. 3) D. Remove One Element
- 用python爬虫,pyinstaller写一个属于自己的彩虹屁生成器!
- 2020牛客寒假算法基础集训营4 C 子段乘积
- Callable and Future in Java(java中的Callable和Future)
- Java类 初步学习
- Gephi可视化拓扑图简单实战
- python连接到SQList数据库以及简单操作
- 在markdown编辑器使用html绘制表格
- 循环不变式:算法中基础概念的明晰
- Codeforces Round #615 (Div. 3)B. Collecting Packages