服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - PHP教程 - php中通过Ajax如何实现异步文件上传的代码实例

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

2019-11-24 14:58PHP教程网 PHP教程

php结合Ajax技术如何实现异步文件上传 有了file filereader 对象的支持,异步文件上传将变得简单。(以前都会把form提交到iframe来实现)

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

复制代码代码如下:


<!doctype html > 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>html5 file and filereader</title> 
<link href="html/ui.css" _mce_href="html/ui.css" rel="stylesheet" /> 
</head> 
<body> 
<style type="text/css"><!-- 
.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;} 
--></style><style type="text/css" _mce_bogus="1"><!-- 
.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;} 
--></style> 
<div class="box" id="baseinfo"> 
<h2>(把图片拖拽到这里)利用 filereader 获取文件 base64 编码</h2> 
<div></div> 
</div> 
<div class="log"> 
<ul id="log"> 
</ul> 
</div> 
<script type="text/CSS" ><!-- 
(function(){ 
window.datavalue = 0; 
var html = ' <dl class="dl"> 
<dd>filename: $filename$</dd> 
<dd>filetype: $filetype$</dd> 
<dd>filesize: $filesize$</dd> 
<dd><img src="$data$" /></dd> 
<dd>filebase64: <br/> 
<div style="width:100%; height:100px;">$filebase64$</div> 
</dd> 
</dl> 

var log = function(msg){ 
//console['log'](msg); 
document.getelementbyid('log').innerhtml += '<li>'+ msg +'</li>'; 

var dp = function(){ 
var defconfig = { 
dropwrap : window 

this.init.apply(this, [defconfig]); 
this.file = null; 

dp.prototype = { 
init:function(args){ 
var dropwrap = 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('window drop bind--ok'); 
}, 
_dragenter:function(e){e.stoppropagation();e.preventdefault();}, 
_dragover:function(e){e.stoppropagation();e.preventdefault();}, 
readfile:function(e){ 
e.stoppropagation(); 
e.preventdefault(); 
var dt = e.datatransfer; 
var files = dt.files; 
for(var i = 0; i< files.length;i++){ 
var html = html.slice(); 
html = this.writeheader(files[i], html); 
this.read(files[i], html); 

}, 
read:function(file, h){ 
var type = file.type; 
var reader = new filereader(); 
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('data uri--ok'); 
var d = 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.com base 64 编码 
return; 
}, 
writeheader:function(file, h){ 
log(file.filename + '+' + (file.size/1024)); 
return h.replace('$filename$', file.filename).replace("$filesize$",(file.size/1024)+'kb').replace("$filetype$",file.type); 


new dp(); 
})() 
// --></script> 
</body> 
</html> 
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);//读取文本信息 

延伸 · 阅读

精彩推荐