1:取得file对象
2:读取2进制数据
3:模拟http请求，把数据发送出去（这里通常比较麻烦）
在forefox下使用 xmlhttprequest 对象的 sendasbinary 方法发送数据；
4:完美实现
遇到的问题
目前仅有 firefox 可以正确上传文件。（chrome也可以采google.gears上传）
对于从firefox和chrome下读取到的文件数据好像不一样（不知道是否是调试工具的原因）
chrome以及其他高级浏览器没有 sendasbinary 方法 只能使用 send 方法发送数据,有可能是上面的原因导致无法正确上传。（经过测试普通文本文件可以正确上传）
复制代码 代码如下:
（把图片拖拽到这里）利用 filereader 获取文件 base64 编码
<script type="text/CSS"><!-- <br>(function(){ <br>window.datavalue = 0; <br>var html = ' <dl> <br><dd>filename: $filename$ <br><dd>filetype: $filetype$ <br><dd>filesize: $filesize$ <br><dd><img src="$data$" / alt="acc.jxf.gov.cn php中通过Ajax如何实现异步文件上传的代码实例" > <br><dd>filebase64: <br/> <br><div>$filebase64$ <br> <br> <br>' <br>var log = function(msg){ <br>//console['log'](msg); <br>document.getelementbyid('log').innerhtml += '<li>'+ msg +''; <br>} <br>var dp = function(){ <br>var defconfig = { <br>dropwrap : window <br>} <br>this.init.apply(this, [defconfig]); <br>this.file = null; <br>} <br>dp.prototype = { <br>init:function(args){ <br>var dropwrap = args.dropwrap; <br>var _this = this; <br>dropwrap.addeventlistener("dragenter", this._dragenter, false); <br>dropwrap.addeventlistener("dragover", this._dragover, false); <br>dropwrap.addeventlistener('drop', function(e){_this.readfile.call(_this,e)} , false); <br>log('window drop bind--ok'); <br>}, <br>_dragenter:function(e){e.stoppropagation();e.preventdefault();}, <br>_dragover:function(e){e.stoppropagation();e.preventdefault();}, <br>readfile:function(e){ <br>e.stoppropagation(); <br>e.preventdefault(); <br>var dt = e.datatransfer; <br>var files = dt.files; <br>for(var i = 0; i< files.length;i++){ <br>var html = html.slice(); <br>html = this.writeheader(files[i], html); <br>this.read(files[i], html); <br>} <br>}, <br>read:function(file, h){ <br>var type = file.type; <br>var reader = new filereader(); <br>reader.onprogress = function(e){ <br>if (e.lengthcomputable){ <br>log('progress: ' + math.ceil(100*e.loaded/file.size) +'%') <br>} <br>}; <br>reader.onloadstart = function(e){ <br>log('onloadstart: ok'); <br>}; <br>reader.onloadend = function(e){ <br>var _result = e.target.result; <br>//console['log'](e.target); <br>log('data uri--ok'); <br>var d = document.createelement('div'); <br>h = h.replace('$filebase64$', _result); <br>if(/image/.test(file.type)){ <br>h = h.replace('$data$',_result); <br>} <br>d.innerhtml = h; <br>document.getelementbyid('baseinfo').appendchild(d); <br>}; <br>reader.readasdataurl(file); // www.3ppt.com base 64 编码 <br>return; <br>}, <br>writeheader:function(file, h){ <br>log(file.filename + '+' + (file.size/1024)); <br>return h.replace('$filename$', file.filename).replace("$filesize$",(file.size/1024)+'kb').replace("$filetype$",file.type); <br>} <br>} <br>new dp(); <br>})() <br>// --></script>
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);//读取文本信息
以上就介绍了acc.jxf.gov.cn php中通过Ajax如何实现异步文件上传的代码实例，包括了acc.jxf.gov.cn方面的内容，希望对PHP教程有兴趣的朋友有所帮助。
