频道导航

php中通过Ajax如何实现异步文件上传的代码实例

2018-12-30 Ajax 前端之家

前端之家收集整理的这篇文章主要介绍了php中通过Ajax如何实现异步文件上传的代码实例，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

1:取得file对象
2:读取2进制数据
3:模拟http请求，把数据发送出去（这里通常比较麻烦）
在forefox下使用 xmlhttprequest 对象的 sendasbinary 方法发送数据；
4:完美实现
遇到的问题
目前仅有 firefox 可以正确上传文件。（chrome也可以采google.gears上传）
对于从firefox和chrome下读取到的文件数据好像不一样（不知道是否是调试工具的原因）
chrome以及其他高级浏览器没有 sendasbinary 方法只能使用 send 方法发送数据,有可能是上面的原因导致无法正确上传。（经过测试普通文本文件可以正确上传）
<div class="codetitle"><a style="CURSOR: pointer" data="55199" class="copybut" id="copybut55199" onclick="doCopy('code55199')"> 代码如下:

<div class="codebody" id="code55199">
<!doctype html >

html5 file and filereader

<style type="text/css"><style type="text/css" _mce_bogus="1">
<div class="Box" id="baseinfo">

（把图片拖拽到这里）利用 filereader 获取 文件 base64 编码

filereader对象
var filereader = new filereader();
filereader.onloadend = function(){
console.log(this.readystate); // 这个时候应该是 2
console.log(this.result); 读取完成回调函数，数据保存在result中
}
filereader.readasbinarystring(file);// 开始读取2进制数据异步参数为file 对象
//filereader.readasdataurl(file); // 读取base64
//filereader.readastext(file);//读取文本信息

异步文件上传