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 相关文章推荐
PHP has encountered an Access Violation
Jan 15 PHP
mysql 中InnoDB和MyISAM的区别分析小结
Apr 15 PHP
PHP parse_url 一个好用的函数
Oct 03 PHP
ThinkPHP的URL重写问题
Jun 22 PHP
PHP实现根据设备类型自动跳转相应页面的方法
Jul 24 PHP
PHP中比较时间大小实例
Aug 21 PHP
PHP中file_get_contents高?用法实例
Sep 24 PHP
ThinkPHP实现二级循环读取的方法
Nov 03 PHP
用PHP代码在网页上生成图片
Jul 01 PHP
PHP封装的MSSql操作类完整实例
May 26 PHP
php使用ftp实现文件上传与下载功能
Jul 21 PHP
PHP面向对象之里氏替换原则简单示例
Apr 08 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
文件上传类
2006/10/09 PHP
关于php中一些字符串总结
2016/05/05 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
详解php协程知识点
2018/09/21 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
学习JavaScript设计模式之模板方法模式
2016/01/20 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
vscode下的vue文件格式化问题
2018/11/28 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
PyQt5 多窗口连接实例
2019/06/19 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
RealTek面试题
2016/06/28 面试题
linux比较文件内容的命令是什么
2015/09/23 面试题
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
我的梦想演讲稿
2014/04/30 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
python 实现定时任务的四种方式
2021/04/01 Python
利用Apache Common将java对象池化的问题
2022/06/16 Servers