HTML5技术

仿AS语法来写HTML5—第9章,URLLoader读取文件

字号+ 作者:lufy 来源: 2014-11-16 21:26 我要评论( )

先看看最后的代码 JavaScript Code 复制内容到剪贴板 function readFile(){ urlloader= new LURLLoader(); urlloader.addEventListener(LEvent.COMPLETE,readFileOk); urlloader.load( ../file/test.txt , text ); } function readFileOk(){

 先看看最后的代码

JavaScript Code复制内容到剪贴板
  1. function readFile(){  
  2.         urlloader = new LURLLoader();  
  3.         urlloader.addEventListener(LEvent.COMPLETE,readFileOk);  
  4.         urlloader.load("../file/test.txt","text");  
  5. }  
  6. function readFileOk(){  
  7.         mytxt.text = urlloader.data;  
  8. }  
基本上已经实现了Actionscript的模仿了。

效果和代码看这里,看不到效果的请下载支持http://fsanguo.comoj.com/html5/jstoas09/index.html

下面说说实现过程
其实javascript中的ActiveXObject是可以实现本地文件的读写的,但是你的浏览器的安全级别必须设定到最低,但是我们做的游戏和网页是要放到网上的,我们没有办法要求所有的用户这样做。
在这里,我用php来实现这一过程,php可以自由读取服务器上的文件,它并不依赖用户的浏览器的设定
用php读取文件很简单,一个fopen函数就可以搞定,下面是file.php的代码

JavaScript Code复制内容到剪贴板
  1. if(!file_exists($_POST["file"])){  
  2.                 echo "";  
  3.                 exit;  
  4.         }  
  5.         $file = fopen($_POST["file"],"r");  
  6.         $filemsg = "";  
  7.         while (!feof($file)) {  
  8.                 $line = fgets($file);  
  9.                 $filemsg = $line;  
  10.         }  
  11.         fclose($file);  
  12.         echo $filemsg;  

把这个php放到你喜欢的位置,然后在legend.js里面设定路径LEGEND_FILE_PHP指向你放的位置
关于javascript调用php,当然可以自己写,因为它并不算复杂,但是我是一个很懒的人,所以我直接用jquery来调用了,jquery是什么?估计不用我解释了吧
关于LURLLoader的构造,和LLoader基本一样,只有load方法不一样,下面是LURLLoader类的完整代码,里面调用了之前准备的php来获取要读取的文本

JavaScript Code复制内容到剪贴板
  1. function LURLLoader(){  
  2.         var self = this;  
  3.         self.objectindex = ++LGlobal.objectIndex;  
  4.         self.type="LURLLoader";  
  5.         self.loadtype = "";  
  6.         self.content = null;  
  7.         self.oncomplete = null;  
  8.         self.event = {};  
  9. }  
  10. LURLLoader.prototype = {  
  11.         addEventListener:function(type,listener){  
  12.                 var self = this;  
  13.                 if(type == LEvent.COMPLETE){  
  14.                         self.oncomplete = listener;  
  15.                 }  
  16.         },  
  17.         load:function (path,loadtype){  
  18.                 var self = this;  
  19.                 self.loadtype = loadtype;  
  20.                 if(self.loadtype == "text"){  
  21.                         $.post(LEGEND_FILE_PHP, {  
  22.                                 flg:"read",  
  23.                                 file:path  
  24.                         },function(data){  
  25.                                 if(self.oncomplete){  
  26.                                         self.event.currentTarget = data;  
  27.                                         self.data = data;  
  28.                                         self.oncomplete(self.event);  
  29.                                 }  
  30.                         });  
  31.                 }  
  32.         }  
  33. }  

关于上面的例子,我加了一个按钮,一个LTextField,代码看下面

JavaScript Code复制内容到剪贴板
  1. init(40,"mylegend",600,500,main);  
  2.   
  3. var loadingLayer;  
  4. var backLayer;  
  5.   
  6. var urlloader  
  7. var mytxt;  
  8. function main(){  
  9.         legendLoadOver();  
  10.           
  11.         var readBtn = addButton("读取",20);  
  12.         readBtn.x = 10;  
  13.         readBtn.y = 20;  
  14.         addChild(readBtn);  
  15.         readBtn.addEventListener(LMouseEvent.MOUSE_DOWN, readFile);  
  16.           
  17.         mytxt = new LTextField();  
  18.         mytxt.x = 10;  
  19.         mytxt.y = 50;  
  20.         mytxt.text = "";  
  21.         mytxt.width = 300;  
  22.         mytxt.height = 200;  
  23.         mytxt.setType(LTextFieldType.INPUT);  
  24.         addChild(mytxt);  
  25. }  
  26. function readFileOk(){  
  27.         mytxt.text = urlloader.data;  
  28. }  
  29. function readFile(){  
  30.         urlloader = new LURLLoader();  
  31.         urlloader.addEventListener(LEvent.COMPLETE,readFileOk);  
  32.         urlloader.load("../file/test.txt","text");  
  33. }  
  34. function addButton(lbl,x){  
  35.         var up = new LSprite();  
  36.         up.graphics.drawRect(1,"black",[0, 0, 80, 20],true,"#999999");  
  37.         var txt = new LTextField();  
  38.         txt.x = x;  
  39.         txt.text = lbl;  
  40.         up.addChild(txt);  
  41.         var over = new LSprite();  
  42.         over.graphics.drawRect(1,"black",[0, 0, 80, 20],true,"#cccccc");  
  43.         var txt1 = new LTextField();  
  44.         txt1.x = x;  
  45.         txt1.text = lbl;  
  46.         over.addChild(txt1);  
  47.         var btn = new LButton(up,over);  
  48.         return btn;  
  49. }  

over,模仿ActionScript读取文本文件完成了

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5开发的翻页效果

    HTML5开发的翻页效果

    2014-11-16 21:26

  • 仿AS语法来写HTML5-终篇LegendForHtml5Programming

    仿AS语法来写HTML5-终篇LegendForHtml5Programming

    2014-11-16 21:26

  • 仿AS语法来写HTML5—第8章,图片处理+粒子

    仿AS语法来写HTML5—第8章,图片处理+粒子

    2014-11-16 21:26

  • 仿AS语法来写HTML5—第7章,自定义按钮

    仿AS语法来写HTML5—第7章,自定义按钮

    2014-11-16 21:26

网友点评