php结合Ajax技术如何实现异步文件上传 有了file filereader 对象的支持,异步文件上传将变得简单。(以前都会把form提交到iframe来实现)
2:读取2进制数据
3:模拟http请求,把数据发送出去(这里通常比较麻烦)
在forefox下使用 xmlhttprequest 对象的 sendasbinary 方法发送数据;
4:完美实现
遇到的问题
目前仅有 firefox 可以正确上传文件。(chrome也可以采google来源gaodai#ma#com搞@代~码网.gears上传)
对于从firefox和chrome下读取到的文件数据好像不一样(不知道是否是调试工具的原因)
chrome以及其他高级浏览器没有 sendasbinary 方法 只能使用 send 方法发送数据,有可能是上面的原因导致无法正确上传。(经过测试普通文本文件可以正确上传)
<!–
.box{background:#f8f8f8;border:1px solid #ccc;padding:10px;-webkit-box-shadow:#000 0px 0px 4px;-moz-box-shadow:#000 0px 0px 4px;
-webkit-border-radius:2px;font-family: ‘segoe ui’, calibri, ‘myriad pro’, myriad, ‘trebuchet ms’, helvetica, arial, sans-serif;
}
.bl{ font-weight:700;}
.dl{ padding:10px; border-top:1px dotted #999;}
.dl dd{ padding:0; margin:0;}
.log{border:1px solid #ccc; background:#f8f8f8; width:200px; position:absolute; right:10px; top:10px;}
.log li{border:1p dotted #ccc;word-wrap:break-word;word-break:break-all; margin:0px; padding:0;}
.log ul{margin:0px; padding:0; list-style:none;}
–><!–
.box{background:#f8f8f8;border:1px solid #ccc;padding:10px;-webkit-box-shadow:#000 0px 0px 4px;-moz-box-shadow:#000 0px 0px 4px;
-webkit-border-radius:2px;font-family: ‘segoe ui’, calibri, ‘myriad pro’, myriad, ‘trebuchet ms’, helvetica, arial, sans-serif;
}
.bl{ font-weight:700;}
.dl{ padding:10px; border-top:1px dotted #999;}
.dl dd{ padding:0; margin:0;}
.log{border:1px solid #ccc; background:#f8f8f8; width:200px; position:absolute; right:10px; top:10px;}
.log li{border:1p dotted #ccc;word-wrap:break-word;word-break:break-all; margin:0px; padding:0;}
.log ul{margin:0px; padding:0; list-style:none;}
–>
(把图片拖拽到这里)利用 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);//读取文本信息
以上就是php中通过Ajax如何实现异步文件上传的代码实例的详细内容,更多请关注gaodaima搞代码网其它相关文章!