Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

文件上传的AS解决方案

  废话不多说,先来看看AS文件。 package {
  import flash.display.*;
  import flash.events.*;
  import flash.net.*;
  import flash.external.ExternalInterface;
  public class Uploader extends Sprite{
    public function Uploader(){
      //创建FR对象
      var fr=new FileReference;
      //舞台填充透明背景色
      (function(g,s){
        g.beginFill(0,0);
        g.drawRect(0,0,s.stageWidth,s.stageHeight);
      })(this.graphics,stage);
      //舞台自动大小
      stage.scaleMode=StageScaleMode.EXACT_FIT;
      //舞台添加点击事件
      stage.addEventListener(MouseEvent.CLICK,function(){
        //打开文件选择对话框
        //这里可以设置文件类型过滤器
        //这些过滤器放在一个数组中作为browser方法的参数
        //如果没有参数,browser是可以选择所有类型的文件的
        fr.browse([new FileFilter("图片文件","*.jpg;*.gif;*.png")]);
      });
      //FR对象选择文件触发
      fr.addEventListener(Event.SELECT,function(){
        fr.upload(new URLRequest("Uploader.php"),"file");
      });
      //FR对象上传过程触发
      fr.addEventListener(ProgressEvent.PROGRESS,function(e){
        ExternalInterface.call("Uploader_progress",e);
      });
      //FR对象上传完成触发
      fr.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,function(e){
        ExternalInterface.call("Uploader_complete",e.text);
      });
    };
  };
};
  如果看过之前关于AS的文章,我想这些注释就足够了。为什么要在舞台上填充透明和为什么要把事件绑定在舞台上,这篇“使用AS实现复制到剪切板”中有说过,这里就不重复了。这个AS只是单个文件上传的,如果要多文件上传原理是相同的。只是把FileReference对象换成FileReferenceList而已。这个AS程序是把选中的文件POST到和SWF文件同目录的Upload.php这个服务器程序上。下面是Upload.php的代码 //Uploader.php
echo json_encode($_FILES['file']);
这里是演示,我就不做完整的上传图片的完整代码了。如果需要可以参考“让度娘为咱做图片网络备份”这篇文章。接着,我们把前面的AS文件编译成SWF放到Web页面上调用。下面是Web页面的代码 <style>
.Uploader {display:inline-block;position:relative;overflow:hidden;}
#Uploader {position:absolute;left:0px;top:0px;width:100%;height:100%;}
</style>
<script>
var progress;
//找到显示进度的文本节点,并放入全局变量
window.onload=function(){
  var o=document.getElementById("Uploader-text");
  progress=o.childNodes[0];
};
//进度事件,上传过程持续触发
function Uploader_progress(e){
  //计算进度并显示
  var p=e.bytesLoaded/e.bytesTotal*10000;
  progress.data=Math.round(p)/100+"%";
};
function Uploader_complete(e){
  if(e){
    //解析PHP程序返回过来的JSON,并做相应操作
    e=eval("("+e+")");
    progress.data="文件上传完成:"+e.size+"字节";
  }else progress.data="错误";
};
</script>
<a class="Uploader" href="JavaScript:;">
  <span id="Uploader-text">上传</span>
  <object type="application/x-shockwave-flash"
          id="Uploader" data="Uploader.swf">
    <param name="movie" value="Uploader.swf" />
    <param name="wmode" value="Transparent" />
  </object>
</a>


  不要吐槽这个UI,这个的程序已经把功能完成了,至于UI要怎么做那就很随便了。我是在本地测试,上传东西瞬间就成功了,看不到进度的显示,不过试着传一个超大的文件它会显示的。这里的IE用了IE7的模式,IE6我就懒的开虚拟机测试了,而且它也没理由不兼容。
  最后,这个例子的打包下载:
    文件上传的AS解决方案.rar
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^