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

本文中，PHP使用HTML5文件Api实现了Ajax文件上传功能。分享给大家参考，如下：

FileApi是HTML5的一个新特性。有了这个新特性，js可以读取本地文件，然后实现真正的Ajax上传文件，而不是iframe方法。下面将介绍api的使用和实现Ajax上传文件：

FileApi的使用

定义上传控制：

输入类型=' file ' name=' pic ' onchange=' self file()；'/上传文件时，将触发selfile()功能。selfile()代码：

var files=document . getelementsbytagname(' input ')[0]。文件；//fileList对象，文件列表对象，表示已经上传了多个文件。如果只上传了一个文件，它也是fileList对象var files=document . getelementsbytagname(' input ')[0]。文件[0]；//file对象，表示单个上传文件Ajax上传文件

渲染：

项目结构图：

11-fileApi.html文件：

页面上有一个文件上传按钮。如果有文件上传，则onchange事件被响应，并调用selfile函数。然后js读取上传的文件，在页面上显示文件名和大小，创建FormData对象并添加数据，用ajax上传文件，预览上传文件的效果。

！doctype html head metharset=' utf-8 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' title file API实现Ajax上传文件/title link rel='样式表' href='脚本函数self ile(){ var file=document . getelementsbytagname(' input ')[0]。文件[0]；//js读取上传的文件var con=Con='文件名：' file . name ' br/'；con=' size:' file . size；document.getElementById('debug ')。innerHTML=con//在页面上显示文件名和大小。var FD=new FormData()；//创建FormData对象fd.append('pic '，文件)；//添加文件数据//ajax上传文件var xhr=new XMLHttpRequest()；xhr.open('POST '，' 11-fileApi.php '，true)；xhr . send(FD)；var img=document . create element(' img ')；//动态创建img标记img . src=window . URL . createobjecturl(文件)；//直接从resource document . getelementsbytagname(' body ')[0]读取二进制对象。浏览器显示的appendchild (img );//将img标记动态添加到dom树}/script/head body输入类型=' file ' name=' pic ' onchange=' self file()；'/div id=' debug '/div/body/html 11-file API . PHP文件：

首先判断一个文件是否上传，然后判断上传是否成功。最后，将文件复制到当前目录下的上传目录，并保持文件名不变。

？Php/** * fileApi实现Ajax上传文件* @ AuthorWebBC */if(空($ _ files)) {exit('无文件')；}if($_FILES['pic']['error']！==0){ exit(' fail ')；} move _ uploaded _ FIles($ _ FILES[' pic '][' tmp _ name ']，'。/upload/'。$ _ FILES[' pic '][' name '])；更多对PHP相关内容感兴趣的读者可以查看本网站专题：《php文件操作总结》、《PHP目录操作技巧汇总》、《PHP常用遍历算法与技巧总结》、《PHP数据结构与算法教程》、《php程序设计算法总结》、《PHP网络编程技巧总结》、0103010

希望本文对PHP编程有所帮助。