睿美印象网络欢迎您的到来,并真诚的希望能与您合作!
睿美印象网络
返回上一页
客服QQ
点击这里给我发消息
客服QQ
点击这里给我发消息
一切从沟通开始……

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

作者:睿美印象网站建设工作室  发布日期:2012-11-15
 先看看最后的代码

JavaScript Code复制内容到剪贴板
function readFile(){  
        urlloader = new LURLLoader();  
        urlloader.addEventListener(LEvent.COMPLETE,readFileOk);  
        urlloader.load("../file/test.txt","text");  
}  
function readFileOk(){  
        mytxt.text = urlloader.data;  
}  
基本上已经实现了Actionscript的模仿了。
效果和代码看这里,看不到效果的请下载支持html5的浏览器
http://fsanguo.comoj.com/html5/jstoas09/index.html

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

JavaScript Code复制内容到剪贴板
if(!file_exists($_POST["file"])){  
                echo "";  
                exit;  
        }  
        $file = fopen($_POST["file"],"r");  
        $filemsg = "";  
        while (!feof($file)) {  
                $line = fgets($file);  
                $filemsg = $line;  
        }  
        fclose($file);  
        echo $filemsg;  
把这个php放到你喜欢的位置,然后在legend.js里面设定路径LEGEND_FILE_PHP指向你放的位置
关于javascript调用php,当然可以自己写,因为它并不算复杂,但是我是一个很懒的人,所以我直接用jquery来调用了,jquery是什么?估计不用我解释了吧
关于LURLLoader的构造,和LLoader基本一样,只有load方法不一样,下面是LURLLoader类的完整代码,里面调用了之前准备的php来获取要读取的文本

JavaScript Code复制内容到剪贴板
function LURLLoader(){  
        var self = this;  
        self.objectindex = ++LGlobal.objectIndex;  
        self.type="LURLLoader";  
        self.loadtype = "";  
        self.content = null;  
        self.oncomplete = null;  
        self.event = {};  
}  
LURLLoader.prototype = {  
        addEventListener:function(type,listener){  
                var self = this;  
                if(type == LEvent.COMPLETE){  
                        self.oncomplete = listener;  
                }  
        },  
        load:function (path,loadtype){  
                var self = this;  
                self.loadtype = loadtype;  
                if(self.loadtype == "text"){  
                        $.post(LEGEND_FILE_PHP, {  
                                flg:"read",  
                                file:path  
                        },function(data){  
                                if(self.oncomplete){  
                                        self.event.currentTarget = data;  
                                        self.data = data;  
                                        self.oncomplete(self.event);  
                                }  
                        });  
                }  
        }  
}  
关于上面的例子,我加了一个按钮,一个LTextField,代码看下面

JavaScript Code复制内容到剪贴板
init(40,"mylegend",600,500,main);  
  
var loadingLayer;  
var backLayer;  
  
var urlloader  
var mytxt;  
function main(){  
        legendLoadOver();  
          
        var readBtn = addButton("读取",20);  
        readBtn.x = 10;  
        readBtn.y = 20;  
        addChild(readBtn);  
        readBtn.addEventListener(LMouseEvent.MOUSE_DOWN, readFile);  
          
        mytxt = new LTextField();  
        mytxt.x = 10;  
        mytxt.y = 50;  
        mytxt.text = "";  
        mytxt.width = 300;  
        mytxt.height = 200;  
        mytxt.setType(LTextFieldType.INPUT);  
        addChild(mytxt);  
}  
function readFileOk(){  
        mytxt.text = urlloader.data;  
}  
function readFile(){  
        urlloader = new LURLLoader();  
        urlloader.addEventListener(LEvent.COMPLETE,readFileOk);  
        urlloader.load("../file/test.txt","text");  
}  
function addButton(lbl,x){  
        var up = new LSprite();  
        up.graphics.drawRect(1,"black",[0, 0, 80, 20],true,"#999999");  
        var txt = new LTextField();  
        txt.x = x;  
        txt.text = lbl;  
        up.addChild(txt);  
        var over = new LSprite();  
        over.graphics.drawRect(1,"black",[0, 0, 80, 20],true,"#cccccc");  
        var txt1 = new LTextField();  
        txt1.x = x;  
        txt1.text = lbl;  
        over.addChild(txt1);  
        var btn = new LButton(up,over);  
        return btn;  
}  
over,模仿ActionScript读取文本文件完成了

转载请注明:睿美印象网站建设工作室www.ruimeiyx.com
分享到:
已有 0 条评论
暂无评论
睿美印象在线客服
客服部小睿:
点击这里给我发消息
设计部小美:
点击这里给我发消息
技术海绵哥:
点击这里给我发消息
在线淘客服:
睿美印象网络
淘客服小睿:
睿美印象小睿
淘客服小美:
睿美印象小美