php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析

2023-07-31 11:51:05 76

本文实例讲述了php下html5XHR2+FormData+FileAPI上传文件操作。分享给大家供大家参考，具体如下：

FormData的作用：

FormData对象可以帮助我们自动的打包表单数据，通过XMLHttpRequest的send()方法来提交表单。当然FormData也可以动态的append数据。FormData的最大优点就是我们可以异步上传一个二进制文件。

例1如下：









用户名
密码
邮箱




functionpost(){
varmyForm=document.getElementById("myForm");
//FormData既可以从表单读取数据，也可以动态append(键,值)添加
varfd=newFormData(myForm);

varxhr=newXMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
alert(this.responseText);
}
};
xhr.open("post","post.php",true);
xhr.send(fd);
returnfalse;
}

FileAPI

使用HTML5DOM新增的FileAPI，现在可以让网页要求用户选择本地文件，并且读取这些文件的信息了。

通过FileAPI，我们可以在用户选取一个或者多个文件之后，访问到代表了所选文件的一个或多个File对象，这些对象被包含在一个FileList对象中。














varupfile=document.getElementById("upfile");
upfile.onchange=function(){
varfile=this.files[0];
alert("文件名:"+file.name+"\r\n"+"大小:"+file.size+"\r\n");
};

我们通过FormData+FileAPI上传文件














varmyForm=document.getElementById("myForm");
varupfile=document.getElementById("upfile");

myForm.onsubmit=function(){
//我们创建一个FormData对象
varfd=newFormData();
varfile=upfile.files[0];
//把文件添加到FormData对象中
fd.append("file",file);

varxhr=newXMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
alert(this.responseText);
}
};
xhr.open("post","upfile.php",true);
//发送FormData对象
xhr.send(fd);
returnfalse;
};

upfile.php代码如下：


使用对象URL来显示你所选择的图片
通过window.URL.createObjectURL()和window.URL.revokeObjectURL()两个DOM方法。
这两个方法创建简单的URL字符串对象，用于指向任何DOMFile对象数据，包括用户电脑中的本地文件。













varmyForm=document.getElementById("myForm");
varupfile=document.getElementById("upfile");

upfile.onchange=function(){
//创建一个img标签
varimg=document.createElement("img");
//通过file对象创建对象URL
img.src=window.URL.createObjectURL(this.files[0]);
img.height=60;
img.onload=function(){
//释放对象URL
window.URL.revokeObjectURL(this.src);
};
document.body.appendChild(img);
};

myForm.onsubmit=function(){
//我们创建一个FormData对象
varfd=newFormData();
varfile=upfile.files[0];
//把文件添加到FormData对象中
fd.append("file",file);

varxhr=newXMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
alert(this.responseText);
}
};
xhr.open("post","upfile.php",true);
//发送FormData对象
xhr.send(fd);
returnfalse;
};




更多关于PHP相关内容感兴趣的读者可查看本站专题：《php文件操作总结》、《PHP目录操作技巧汇总》、《PHP常用遍历算法与技巧总结》、《PHP数据结构与算法教程》、《php程序设计算法总结》及《PHP网络编程技巧总结》
希望本文所述对大家PHP程序设计有所帮助。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析

热门推荐

随机推荐