PHP使用HTML5 FileApi完毕Ajax上传文件作用示例_php手艺_脚本之家

本文实例讲述了PHP使用HTML5
FileApi实现Ajax上传文件功能。分享给大家供大家参考,具体如下:

本文实例讲述了PHP实现带进度条的Ajax文件上传功能。分享给大家供大家参考,具体如下:

本文实例讲述了PHP+iframe模拟Ajax上传文件功能。分享给大家供大家参考,具体如下:

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

之前分享了一篇关于 php使用FileApi实现Ajax上传文件
的文章,里面的Ajax文件上传是不带进度条的,今天分享一篇关于带进度条的Ajax文件上传文章。

xmlhttprequest level 1中,Ajax是不能够上传文件的,因为js不能操作本地文件,但是市场上有一些Ajax异步上传文件的插件,是怎么完成的呢?答案:可以使用iframe模拟Ajax上传文件。接下来博主将使用iframe来模拟Ajax来上传文件。

FileApi使用

12-progress-upload.html文件:

09-iframe-upload.html文件:

当上传文件后,就会触发selfile()函数,selfile()代码:

页面中主要有一个上传文件控件,有文件被选择时响应selfile()方法,接着利用js读取上传文件、创建FormData对象和xhr对象,利用xhr2的新标准,写一个监听上传过程函数,请求11-fileApi.php文件。

页面中有一个表单,表单中有一个上传文件按钮和提交按钮,点击提交按钮执行ajaxUpload函数,然后动态创建iframe标签,让其不可见,最后设置表单的target属性指向iframe。

var files = document.getElementsByTagName[0].files;//fileList对象,文件列表对象,表示有多个文件被上传,如果只有1个文件上传也是fileList对象var files = document.getElementsByTagName[0].files[0];//file对象,表示单个上传文件
 HTML5带进度条的上传功能  function selfile(){ //js读取上传文件 var file = document.getElementsByTagName[0].files[0]; //创建FormData对象 var fd = new FormData(); fd.append; //ajax上传文件 var xhr = new XMLHttpRequest(); xhr.open('POST','11-fileApi.php',true); //利用xhr2的新标准,为上传过程,写一个监听函数 xhr.upload.onprogress = function{ if{//文件长度可计算 var percent = 100*ev.loaded/ev.total;//计算上传的百分比 document.getElementById.style.width = percent + '%';//更改上传进度 document.getElementById.innerHTML = parseInt+'%';//显示上传进度 } } xhr.send;//发送请求 } #progress{ width:500px; height:30px; border:1px solid green; } #bar{ width:0%; height:100%; background-color: green; } HTML5带进度条的上传功能    
 iframe模拟Ajax上传文件  /** * 文件上传 * @return bool 是否提交表单 * 1、捕捉表单提交的动作 * 2、动态创建iframe标签,然其不可见 * 3、设置表单的target属性指向iframe */ function ajaxUpload(){ var iframeName = 'upload'+Math.random();//给iframe取名 $('<iframe name='+iframeName+' width="0" height="0" frameborder="0"></iframe>').appendTo;//动态创建iframe $.attr;//设置form的target属性 $.html('<img src="https://www.jb51.net/article/progress.jpg"/>');//显示上传是否成功 //return false; } iframe模拟Ajax上传文件  

Ajax上传文件

11-fileApi.php文件:

09-iframe-upload.php文件:

11-fileApi.html文件:

首先判断是否有文件上传,然后判断文件上传是否成功,最后移动文件至当前目录下的upload目录下,文件名不变。

首先延时3秒,为了能看到加载的图片,然后判断是否有上传文件,然后返回一段Js代码,这段js是在页面中显示是否上传成功

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

更多关于PHP相关内容感兴趣的读者可查看本站专题:《php文件操作总结》、《PHP目录操作技巧汇总》、《PHP常用遍历算法与技巧总结》、《PHP数据结构与算法教程》、《php程序设计算法总结》及《PHP网络编程技巧总结》

parent.document.getElementById.innerHTML='$error'";//显示上传是否成功?>
 fileApi实现Ajax上传文件  function selfile(){ var file = document.getElementsByTagName[0].files[0];//js读取上传文件 var con = ''; con += '文件名:' + file.name + '<br/>'; con += '大小:' + file.size; document.getElementById.innerHTML = con;//把文件名和大小显示在页面中 var fd = new FormData();//创建FormData对象 fd.append;//添加文件数据 //ajax上传文件 var xhr = new XMLHttpRequest(); xhr.open('POST','11-fileApi.php',true); xhr.send; var img = document.createElement;//动态创建img标签 img.src = window.URL.createObjectURL;//把二进制对象直接读出浏览器显示的资源 document.getElementsByTagName[0].appendChild;//把img标签动态添加到dom树中 }  

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

更多关于PHP相关内容感兴趣的读者可查看本站专题:《php文件操作总结》、《PHP目录操作技巧汇总》、《PHP常用遍历算法与技巧总结》、《PHP数据结构与算法教程》、《php程序设计算法总结》及《PHP网络编程技巧总结》

11-fileApi.php文件:

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

首先判断是否有文件上传,然后判断上传是否成功,最后把文件复制到当前目录下的upload目录下,文件名保持不变。

更多关于PHP相关内容感兴趣的读者可查看本站专题:《php文件操作总结》、《PHP目录操作技巧汇总》、《PHP常用遍历算法与技巧总结》、《PHP数据结构与算法教程》、《php程序设计算法总结》及《PHP网络编程技巧总结》

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

发表评论