提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

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

实例PHP文件上传AJAX异步代码 实现
2023-06-13 09:14:28 时间
1:取得file对象
2:读取2进制数据
3:模拟http请求，把数据发送出去（这里通常比较麻烦）
在forefox下使用xmlhttprequest对象的sendasbinary方法发送数据；
4:完美实现
遇到的问题
目前仅有firefox可以正确上传文件。（chrome也可以采google.gears上传）
对于从firefox和chrome下读取到的文件数据好像不一样（不知道是否是调试工具的原因）
chrome以及其他高级浏览器没有sendasbinary方法只能使用send方法发送数据,有可能是上面的原因导致无法正确上传。（经过测试普通文本文件可以正确上传）
复制代码代码如下:

<!doctypehtml>
<html>
<head>
<metahttp-equiv="content-type"content="text/html;charset=utf-8"/>
<title>html5fileandfilereader</title>
<linkhref="html/ui.css"_mce_href="html/ui.css"rel="stylesheet"/>
</head>
<body>
<styletype="text/css"><!--
.box{background:#f8f8f8;border:1pxsolid#ccc;padding:10px;-webkit-box-shadow:#0000px0px4px;-moz-box-shadow:#0000px0px4px;
-webkit-border-radius:2px;font-family:"segoeui",calibri,"myriadpro",myriad,"trebuchetms",helvetica,arial,sans-serif;
}
.bl{font-weight:700;}
.dl{padding:10px;border-top:1pxdotted#999;}
.dldd{padding:0;margin:0;}
.log{border:1pxsolid#ccc;background:#f8f8f8;width:200px;position:absolute;right:10px;top:10px;}
.logli{border:1pdotted#ccc;word-wrap:break-word;word-break:break-all;margin:0px;padding:0;}
.logul{margin:0px;padding:0;list-style:none;}
--></style><styletype="text/css"_mce_bogus="1"><!--
.box{background:#f8f8f8;border:1pxsolid#ccc;padding:10px;-webkit-box-shadow:#0000px0px4px;-moz-box-shadow:#0000px0px4px;
-webkit-border-radius:2px;font-family:"segoeui",calibri,"myriadpro",myriad,"trebuchetms",helvetica,arial,sans-serif;
}
.bl{font-weight:700;}
.dl{padding:10px;border-top:1pxdotted#999;}
.dldd{padding:0;margin:0;}
.log{border:1pxsolid#ccc;background:#f8f8f8;width:200px;position:absolute;right:10px;top:10px;}
.logli{border:1pdotted#ccc;word-wrap:break-word;word-break:break-all;margin:0px;padding:0;}
.logul{margin:0px;padding:0;list-style:none;}
--></style>
<divclass="box"id="baseinfo">
<h2>（把图片拖拽到这里）利用filereader获取文件base64编码</h2>
<div></div>
</div>
<divclass="log">
<ulid="log">
</ul>
</div>
<scripttype="text/CSS"><!--
(function(){
window.datavalue=0;
varhtml="<dlclass="dl">
<dd>filename:$filename$</dd>
<dd>filetype:$filetype$</dd>
<dd>filesize:$filesize$</dd>
<dd><imgsrc="$data$"/></dd>
<dd>filebase64:<br/>
<divstyle="width:100%;height:100px;">$filebase64$</div>
</dd>
</dl>
"
varlog=function(msg){
//console["log"](msg);
document.getelementbyid("log").innerhtml+="<li>"+msg+"</li>";
}
vardp=function(){
vardefconfig={
dropwrap:window
}
this.init.apply(this,[defconfig]);
this.file=null;
}
dp.prototype={
init:function(args){
vardropwrap=args.dropwrap;
var_this=this;
dropwrap.addeventlistener("dragenter",this._dragenter,false);
dropwrap.addeventlistener("dragover",this._dragover,false);
dropwrap.addeventlistener("drop",function(e){_this.readfile.call(_this,e)},false);
log("windowdropbind--ok");
},
_dragenter:function(e){e.stoppropagation();e.preventdefault();},
_dragover:function(e){e.stoppropagation();e.preventdefault();},
readfile:function(e){
e.stoppropagation();
e.preventdefault();
vardt=e.datatransfer;
varfiles=dt.files;
for(vari=0;i<files.length;i++){
varhtml=html.slice();
html=this.writeheader(files[i],html);
this.read(files[i],html);
}
},
read:function(file,h){
vartype=file.type;
varreader=newfilereader();
reader.onprogress=function(e){
if(e.lengthcomputable){
log("progress:"+math.ceil(100*e.loaded/file.size)+"%")
}
};
reader.onloadstart=function(e){
log("onloadstart:ok");
};
reader.onloadend=function(e){
var_result=e.target.result;
//console["log"](e.target);
log("datauri--ok");
vard=document.createelement("div");
h=h.replace("$filebase64$",_result);
if(/image/.test(file.type)){
h=h.replace("$data$",_result);
}
d.innerhtml=h;
document.getelementbyid("baseinfo").appendchild(d);
};
reader.readasdataurl(file);//www.3ppt.combase64编码
return;
},
writeheader:function(file,h){
log(file.filename+"+"+(file.size/1024));
returnh.replace("$filename$",file.filename).replace("$filesize$",(file.size/1024)+"kb").replace("$filetype$",file.type);
}
}
newdp();
})()
//--></script>
</body>
</html>
filereader对象
varfilereader=newfilereader();
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);//读取文本信息

相关文章