白底图制作_修图软件哪个比较好用_网页抠图_p图_公众号图片制作
当前位置:建站首页 > 新闻资讯 > 公司新闻 >

PHP应用HTML5 FileApi完成Ajax提交文档作用实例

发表日期:2021-04-04 23:13文章编辑:jianzhan浏览次数: 标签:    

文中案例叙述了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目标,文档目录目标,表明有好几个文档被提交,假如仅有一个文档提交也是fileList目标
var files = document.getElementsByTagName('input')[0].files[0];//file目标,表明单独提交文档

Ajax提交文档

实际效果图:

新项目构造图:

<文档:

网页页面中关键有一个提交文档按键,假如有文档提交,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文件目录实际操作方法归纳》、《PHP常见解析xml优化算法与方法小结》、《PHP数据信息构造与优化算法实例教程》、《php编程设计优化算法小结》及《PHP互联网程序编写方法小结》

期待文中上述对大伙儿PHP编程设计有一定的协助。

相关新闻

商品主图怎样制做?应用照片手机软件轻轻松松

在某宝中,商品的点一下率靠甚么?关键的還是要看商品主图。无论是检索結果還是网页页面...

日期:2021-01-25 浏览次数:54

想给照片完全免费再加水印?赶快应用这1照片编

照片早已变成如今人们日常生活中必不能少的存在,好像盆友圈、海报这些都会看到各种各样...

日期:2020-12-14 浏览次数:132

高应用率的特惠券设计方案方法!

高应用率的特惠券设计方案方法是啥?在设计方案好啦特惠券以后,它的使用价值就被别人们...

日期:2020-12-09 浏览次数:170

颜色在当代简洁海报的应用

在这个信息内容时期,海报在新闻媒体中饰演着十分关键的人物角色,而在设计方案中,颜色...

日期:2020-12-08 浏览次数:70

网站制作中强烈推荐应用的HTML标识

HTML5标准的引进产生了很多新的词义标识,为HTML标识授予了大量含意。这寓意着网站制作工作...

日期:2020-11-15 浏览次数:53

怎样应用个人名片制做手机软件制做适合的个人

制做照片的照片制做手机软件,除PhotoshopCS和制图手机软件和别的通用性的照片制做手机软件外...

日期:2020-09-16 浏览次数:71