Uploadify上传插件的使用

Uploadify插件的使用

 Uploadify是一款优秀的文件上传插件。官方网站是：http://www.uploadify.com/download/

 

1.下载Uploadify插件，解压后如下图所示：

 

2.在HTML文件头部包含所需JS文件，CSS文件。记得包含JQuery

（具体路径根据自己的工程来定）

 

<link rel="stylesheet" type="text/css" href="__PUBLIC__/Js/lib/uploadify/uploadify.css">  
  
<script type="text/javascript" src="__PUBLIC__/Js/lib/jquery-1.6.4.min.js"></script>  
  
  
<script type="text/javascript"   src="__PUBLIC__/Js/lib/uploadify/jquery.uploadify-3.1.min.js"></script>  

　　

 

3.编写Uploadify的配置文件，比如 imageUpload.js

$(function() {  
      
        $('#photoname').uploadify({  
            'swf'               :   PUBLIC+"/Js/lib/uploadify/uploadify.swf",  
            'uploader'      :   PUBLIC+"/Js/lib/uploadify/uploadify.php",  
            'cancelImg'     :   PUBLIC+"/Js/lib/uploadify/uploadify-cancel.png",  
            'debug'         :   true,  
            'buttonText'    :   '选择照片',  
            'method'            :   'post',  
            'buttonClass'   :  'upload_button',  
            'fileTypeDesc'  :   '图片文件',  
            'fileTypeExts'  :   '*.gif;*.jpg;*.png;*.bmp',  
            'formData'      :   {'public_path'  :   PUBLIC},  
            'multi'             :   false,  
              
            'onUploadComplete': function(file){  
                  
            },  
              
            /** 
             * 上传成功后触发事件 
             */  
             'onUploadSuccess' : function(file, data, response) {  
                //参数data保存的是上传后的图片的路径  
                //alert(data);  
                //$('#photo').css("background-color","#f00");  
                  
                var path=PUBLIC+"/Uploads/Photo/"+data;  
                $('#photo>img').attr("src",path);  
                $('#photoname_hidden').val(data);  
            },  
        });  
        //alert(PUBLIC);  
});  

 

关于上面的代码，说明如下：

 

 

• swf指明SWF文件路径
• uploader指明后台处理文件路径
• cancelImg指明取消按钮图片路径
• debug开启调试模式
• buttonText按钮上的文字
• method表示上传表单采用的方式
• buttonClass为按钮添加额外的样式类
• fileTypeDesc打开对话框的提示信息
• fileTypeExts允许上传的文件扩展名
• formData上传文件之外额外上传的表单数据
• multi是否支持多文件上传
• onUploadSuccess上传成功后执行的回调函数

注，还有很多配置参数以及事件，具体可参看Uploadify官方网站。

 

 

 

4.在HTML中的表单代码片段如下：

<p>  
              <label class="label">照片</label>  
              <table><tr><td>  
                <div id="photo"><img src="__PUBLIC__/Uploads/Photo/default.jpg"/></div>  
              </td></tr></table>  
              <input class="text-input small-input" type="file" name="photo" id="photoname" />  
            </p>  
              
            <input type="hidden" name="photoname" id="photoname_hidden"/> 

 

5.服务器端PHP代码Uploadify.php

 

<?php  
  
  
$targetFolder = $_POST['public_path'].'/Uploads/Photo/'; //上传的目标路径  
  
if (!empty($_FILES)) {  
    $tempFile = $_FILES['Filedata']['tmp_name'];  
    $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;  
    $targetFile = rtrim($targetPath,'/') . '/' . md5($_FILES['Filedata']['name']);  
      
    // Validate the file type  
    $fileTypes = array('jpg','jpeg','gif','png','bmp'); // File extensions  
    $fileParts = pathinfo($_FILES['Filedata']['name']);  
      
    //查看文件的名字符串的编码方式  
    $encode = mb_detect_encoding($targetFile, array("UTF-8","GBK","ASCII","GB2312"));  
    //echo $tempFile.'<br>';  
    //echo $targetFile.'<br>';  
    //echo $encode.'<br>';  
    /* 
    if ($encode == "UTF-8"){ 
        $targetFile = iconv("UTF-8","GBK",$targetFile); 
    } 
    */  
          
    if (in_array($fileParts['extension'],$fileTypes)) {  
        move_uploaded_file($tempFile,$targetFile);  
        echo md5($_FILES['Filedata']['name']);  
          
    } else {  
        echo '您好，文件类型不允许！';  
    }  
}  
?>  

 

如果上传的文件名含有中文，可以使用mb_detect_encoding查看文件名的编码方式然后转码，由于我把文件名进行md5()了，故无需考虑编码方式了。

 

 

---------------------------------------------------------------------------------------------------------------------------

 

最后看一下实际的页面表现

 

 

这里需要注意的是服务端PHP文件中echo出的数据将会出现在客户端Uploadify配置文件uploadImage.js中的onUploadSuccess()事件中的data参数里。可以在onUploadSuccess事件回调函数中 调用alert(data)；来查看服务器端脚本的输出信息。

 

由于我在服务器端脚本中：

echo md5($_FILES['Filedata']['name']);  

 

 

因此，在JS文件中的UploadSuccess事件中可以更新<img>标签的src属性，来显示刚刚上传的图片。

 

 

由于这些数据的传递都是以Ajax方式进行的，故整个过程没有提交页面。如果想把图片文件名通过表单的形式提交，那么不妨加一个hidden类型的input元素。然后还是在onUploadSuccess事件中更新其value即可。