当前位置：首页 > PHP教程 > php高级应用 > 列表

php Ajax实现异步文件上传的代码

发布:smiling　来源: PHP粉丝网 　添加日期：2014-09-08 12:34:44　浏览: 评论：0　

1:取得file对象 2:读取2进制数据 3:模拟http请求，把数据发送出去（这里通常比较麻烦） 在forefox下使用 xmlhttprequest 对象的 sendasbinary 方法发送数据； 4:完美实现 

遇到的问题 

目前仅有 firefox 可以正确上传文件,chrome也可以采google.gears上传,对于从firefox和chrome下读取到的文件数据好像不一样,不知道是否是调试工具的原因.

chrome以及其他高级浏览器没有 sendasbinary 方法,只能使用 send 方法发送数据,有可能是上面的原因导致无法正确上传,经过测试普通文本文件可以正确上传.

  1. <!doctype html >  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
  5. <title>html5 file and filereader</title>  
  6. <link href="html/ui.css" _mce_href="html/ui.css" rel="stylesheet" />  
  7. </head>  
  8. <body>  
  9. <style type="text/css"><!--  
  10. .box{background:#f8f8f8;border:1px solid #ccc;padding:10px;-webkit-box-shadow:#000 0px 0px 4px;-moz-box-shadow:#000 0px 0px 4px;  
  11. -webkit-border-radius:2px;font-family: 'segoe ui', calibri, 'myriad pro', myriad, 'trebuchet ms', helvetica, arial, sans-serif;  
  12. }  
  13. .bl{ font-weight:700;}  
  14. .dl{ padding:10px; border-top:1px dotted #999;}  
  15. .dl dd{ padding:0; margin:0;}  
  16. .log{border:1px solid #ccc; background:#f8f8f8; width:200px; position:absolute; right:10px; top:10px;}  
  17. .log li{border:1p dotted #ccc;word-wrap:break-word;word-break:break-all; margin:0px; padding:0;}  
  18. .log ul{margin:0px; padding:0; list-style:none;}  
  19. --></style><style type="text/css" _mce_bogus="1"><!--  
  20. .box{background:#f8f8f8;border:1px solid #ccc;padding:10px;-webkit-box-shadow:#000 0px 0px 4px;-moz-box-shadow:#000 0px 0px 4px;  
  21. -webkit-border-radius:2px;font-family: 'segoe ui', calibri, 'myriad pro', myriad, 'trebuchet ms', helvetica, arial, sans-serif;  
  22. }  
  23. .bl{ font-weight:700;}  
  24. .dl{ padding:10px; border-top:1px dotted #999;}  
  25. .dl dd{ padding:0; margin:0;}  
  26. .log{border:1px solid #ccc; background:#f8f8f8; width:200px; position:absolute; right:10px; top:10px;}  
  27. .log li{border:1p dotted #ccc;word-wrap:break-word;word-break:break-all; margin:0px; padding:0;}  
  28. .log ul{margin:0px; padding:0; list-style:none;}  
  29. --></style>  
  30. <div class="box" id="baseinfo">  
  31. <h2>（把图片拖拽到这里）利用 filereader 获取文件 base64 编码</h2>  
  32. <div></div>  
  33. </div>  
  34. <div class="log">  
  35. <ul id="log">  
  36. </ul>  
  37. </div>  
  38. <script type="text/css" ><!--  
  39. (function(){  
  40. window.datavalue = 0;  
  41. var html = ' <dl class="dl">  
  42. <dd>filename: $filename$</dd>  
  43. <dd>filetype: $filetype$</dd>  
  44. <dd>filesize: $filesize$</dd>  
  45. <dd><img src="$data$" /></dd>  
  46. <dd>filebase64: <br/>  
  47. <div style="width:100%; height:100px;">$filebase64$</div>  
  48. </dd>  
  49. </dl>  
  50. '  
  51. var log = function(msg){  
  52. //console['log'](msg);  
  53. document.getelementbyid('log').innerhtml += '<li>'+ msg +'</li>';  
  54. } 
  55. var dp = function(){  
  56. var defconfig = {  
  57. dropwrap : window  
  58. }  
  59. this.init.apply(this, [defconfig]);  
  60. this.file = null;  
  61. }  
  62. dp.prototype = {  
  63. init:function(args){  
  64. var dropwrap = args.dropwrap;  
  65. var _this = this;  
  66. dropwrap.addeventlistener("dragenter", this._dragenter, false);  
  67. dropwrap.addeventlistener("dragover", this._dragover, false);  
  68. dropwrap.addeventlistener('drop', function(e){_this.readfile.call(_this,e)} , false);  
  69. log('window drop bind--ok');  
  70. },  
  71. _dragenter:function(e){e.stoppropagation();e.preventdefault();},  
  72. _dragover:function(e){e.stoppropagation();e.preventdefault();},  
  73. readfile:function(e){  
  74. e.stoppropagation();  
  75. e.preventdefault();  
  76. var dt = e.datatransfer;  
  77. var files = dt.files;  
  78. for(var i = 0; i< files.length;i++){  
  79. var html = html.slice();  
  80. html = this.writeheader(files[i], html);  
  81. this.read(files[i], html);  
  82. }  
  83. },  
  84. read:function(file, h){  
  85. var type = file.type;  
  86. var reader = new filereader();  
  87. reader.onprogress = function(e){  
  88. if (e.lengthcomputable){  
  89. log('progress: ' + math.ceil(100*e.loaded/file.size) +'%')  
  90. }  
  91. };  
  92. reader.onloadstart = function(e){  
  93. log('onloadstart: ok');  
  94. };  
  95. reader.onloadend = function(e){  
  96. var _result = e.target.result;  
  97. //console['log'](e.target);  
  98. log('data uri--ok');  
  99. var d = document.createelement('div');  
  100. h = h.replace('$filebase64$', _result);  
  101. if(/image/.test(file.type)){  
  102. h = h.replace('$data$',_result);  
  103. }  
  104. d.innerhtml = h;  
  105. document.getelementbyid('baseinfo').appendchild(d);  
  106. };  
  107. reader.readasdataurl(file); // www.phpfensi.com base 64 编码  
  108. return; //开源代码phpfensi.com 
  109. },  
  110. writeheader:function(file, h){  
  111. log(file.filename + '+' + (file.size/1024));  
  112. return h.replace('$filename$', file.filename).replace("$filesize$",(file.size/1024)+'kb').replace("$filetype$",file.type);  
  113. }  
  114. }  
  115. new dp();  
  116. })()  
  117. // --></script>  
  118. </body>  
  119. </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);//读取文本信息

Tags: php Ajax异步 php异步文件上传

分享到：

相关文章

推荐文章

热门文章

最新评论文章