php Ajax完成异步文件上传的代码
发布时间：2022-02-16 01:06:58 所属栏目：PHP教程 来源：互联网
导读：1:取得file对象 2:读取2进制数据 3:模拟http请求，把数据发送出去（这里通常比较麻烦） 在forefox下使用 xmlhttprequest 对象的 sendasbinary 方法发送数据； 4:完美实现 遇到的问题 目前仅有 firefox 可以正确上传文件,chrome也可以采google.gears上传,对
|
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.Cuoxin.com base 64 编码 return; //开源代码Cuoxin.com }, 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);//读取文本信息 （编辑：南平站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
