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查询域名状态whois的类
Nov 25 PHP
php 信息采集程序代码
Mar 17 PHP
sourcesafe管理phpproj文件的补充说明(downmoon)
Apr 11 PHP
一些 PHP 管理系统程序中的后门
Aug 05 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
Aug 06 PHP
体育彩票排列三组选三算法分享
Mar 07 PHP
php将文本文件转换csv输出的方法
Dec 31 PHP
php中ob函数缓冲机制深入理解
Aug 03 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
Jan 12 PHP
Zend Framework教程之Bootstrap类用法概述
Mar 14 PHP
CI框架实现cookie登陆的方法详解
May 18 PHP
gearman中任务的优先级和返回状态实例分析
Feb 27 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
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
vue实现通讯录功能
2018/07/14 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
jquery.pager.js分页实现详解
2019/07/29 jQuery
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
[01:13]这,就是刀塔
2014/07/16 DOTA
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
python安装requests库的实例代码
2019/06/25 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
销售工作岗位职责
2013/12/24 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
2014年安全员工作总结
2014/11/13 职场文书
开除通知书范本
2015/04/25 职场文书
医院感染管理制度
2015/08/05 职场文书
《月球之谜》教学反思
2016/02/20 职场文书