PHP使用HTML5 FileApi实现Ajax上传文件功能示例


Posted in PHP onJuly 01, 2019

本文实例讲述了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上传文件

效果图:

PHP使用HTML5 FileApi实现Ajax上传文件功能示例

项目结构图:

PHP使用HTML5 FileApi实现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']);
?>

希望本文所述对大家PHP程序设计有所帮助。

PHP 相关文章推荐
使用 eAccelerator加速PHP代码的方法
Sep 30 PHP
怎样去阅读一份php源代码
Aug 21 PHP
php 注释规范
Mar 29 PHP
Yii入门教程之Yii安装及hello world
Nov 25 PHP
PHP实现在线阅读PDF文件的方法
Jun 17 PHP
PHP中遇到的时区问题解决方法
Jul 23 PHP
PHP Web木马扫描器代码分享
Sep 06 PHP
Symfony2在Nginx下的配置方法图文教程
Feb 04 PHP
php简单实现多维数组排序的方法
Sep 30 PHP
解决php-fpm.service not found问题的办法
Jun 06 PHP
PHP新特性之字节码缓存和内置服务器
Aug 11 PHP
php框架CodeIgniter主从数据库配置方法分析
May 25 PHP
PHP大文件切割上传并带进度条功能示例
Jul 01 #PHP
PHP大文件切割上传功能实例分析
Jul 01 #PHP
PHP使用反向Ajax技术实现在线客服系统详解
Jul 01 #PHP
PHP封装cURL工具类与应用示例
Jul 01 #PHP
PHP session垃圾回收机制实例分析
Jun 28 #PHP
PHP常用的类封装小结【4个工具类】
Jun 28 #PHP
php实现网页上一页下一页翻页过程详解
Jun 28 #PHP
You might like
世界上第一台立体声收音机
2021/03/01 无线电
PHP 多进程 解决难题
2009/06/22 PHP
php smarty模版引擎中的缓存应用
2009/12/11 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
JS随机密码生成算法
2019/09/23 Javascript
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
python中有函数重载吗
2020/05/28 Python
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
婚前财产公证书
2014/04/10 职场文书
詹天佑教学反思
2014/04/30 职场文书
奥运会口号
2014/06/13 职场文书
管理工程专业求职信
2014/08/10 职场文书
小学见习报告
2014/10/31 职场文书
2015年除四害工作总结
2015/07/23 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers