关于用YUI的Uploader组件上传文件的方法

YUI的Uploader组件用于上传文件非常方便。现将自己的使用体会记录如下：
首先，我们需要明白，我们使用的YUI版本是2.8。

基本使用方法：
1-需要包含的文件：
<script type="text/javascript" src="../include/javascript/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../include/javascript/yui/element/element-min.js"></script>
<script type="text/javascript" src="../include/javascript/yui/uploader/uploader-min.js"></script>
以上包含的文件目录是我自己服务器上的目录结构，以上三条可以用以下语句代替：
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>  
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script>  
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/uploader/uploader-min.js"></script>  

2-在html中需要建立一个uploader的层
<div id="uploaderOverlay" style="position:absolute;z-index:2; width: 62px; height: 16px;"></div>
//注意：以上style中所有属性都不能少。如果没有width,height则选择范围会很大，而且ie浏览器不能用
<div id="selectFilesLink" style="z-index:1"><a id="selectLink" href="#">插入图片</a></div>

3-注册组件
YAHOO.widget.Uploader.SWFURL = "uploader.swf";//因为bug，需要使用老版本的uploader.swf，将其上传到服务器
var uploader = new YAHOO.widget.Uploader( "uploaderOverlay","button.jpg" );//这里的uploaderOverlay就是上面的uploader层，通过此命令将其关联起来

4-对uploader设置侦听器
    uploader.addListener('contentReady', handleContentReady);
    uploader.addListener('fileSelect', onFileSelect)
    uploader.addListener('uploadStart', onUploadStart);
    uploader.addListener('uploadProgress', onUploadProgress);
    uploader.addListener('uploadCancel', onUploadCancel);
    uploader.addListener('uploadComplete', onUploadComplete);
    uploader.addListener('uploadCompleteData', onUploadResponse);
    uploader.addListener('uploadError', onUploadError);
    uploader.addListener('rollOver', handleRollOver);
    uploader.addListener('rollOut', handleRollOut);
    uploader.addListener('click', handleClick);

5-侦听处理函数
    首先设定一个公共变量
    var fileID;
    
    //配置uploader参数
    function handleContentReady () {
        // Allows the uploader to send log messages to trace, as well as to YAHOO.log
        uploader.setAllowLogging(true);
       
        // Disallows multiple file selection in "Browse" dialog.
        uploader.setAllowMultipleFiles(false);
       
        // New set of file filters.
        var ff = new Array({description:"Images", extensions:"*.jpg;*.png;*.gif"},
                           {description:"Videos", extensions:"*.avi;*.mov;*.mpg"});
                          
        // Apply new set of file filters to the uploader.
        uploader.setFileFilters(ff);
    }

    //上传程序
    function upload() {
        alert("开始上传");
    if (fileID != null) {
        uploader.upload(fileID, "http://www.yswfblog.com/upload/upload.php",
                        "POST",
                        {var1:document.getElementByIdx("var1Value").value,
                         var2:document.getElementByIdx("var2Value").value});
    }   
    }

    //选择文件后处理
    function onFileSelect(event) {
        for (var file in event.fileList) {
            if(YAHOO.lang.hasOwnProperty(event.fileList, file)) {
                fileID = event.fileList[file].id;
            }
        }
        //将选择的文件名写入progressReport中
        upload();
    }
   
    //开始上传，可以设计得用户友好
    function onUploadStart(event) {
        this.progressReport.value = "Starting upload...";
    }

    //上传处理中
    function onUploadProgress(event) {
        prog = Math.round(100*(event["bytesLoaded"]/event["bytesTotal"]));
        this.progressReport.value = prog + "% uploaded...";
    }
   
    //上传结束
    function onUploadComplete(event) {
        this.progressReport.value = "Upload complete.";
    }
   
    //上传出错
    function onUploadError(event) {
        this.progressReport.value = "Upload error.";
    }
   
    //上传被取消
    function onUploadCancel(event) {

    }
   
    //获得服务器返回信息
    function onUploadResponse(event){
        alert(event.data);
    }

5-服务端处理函数
<?php  
   foreach ($_FILES as $fieldName => $file) {  
   move_uploaded_file($file['tmp_name'], "./" . strip_tags(basename($file['name'])));  
   echo ("upload succeed!");  
}
?>