JQuery文件上传插件Uploadify

摘要：

Uploadify是JQuery的一个上传插件，实现的效果非常不错，带进度显示.(我的资源中有Demo)

用到的文件：

 js文件:jquery.uploadify-v2.1.0(文件夹)，位置不限

 一般处理界面：UploadHandler.ashx，根目录

 下载图片文件夹：UploadFile，根目录

 cs文件：default.css

属性介绍：

uploader ： uploadify.swf 文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框，默认值：uploadify.swf。 

script ：   后台处理程序的相对路径 。默认值：uploadify.php 

checkScript ：用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径 

fileDataName ：设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata 

method ： 提交方式Post 或Get 默认为Post 

scriptAccess ：flash脚本文件的访问模式，如果在本地测试设置为always，默认值：sameDomain  

folder ：  上传文件存放的目录 。 

queueID ： 文件队列的ID，该ID与存放文件队列的div的ID一致。 

queueSizeLimit ： 当允许多文件生成时，设置选择文件的个数，默认值：999 。 

multi ： 设置为true时可以上传多个文件。 

auto ： 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 。 

fileDesc ： 这个属性值必须设置fileExt属性后才有效，用来设置选择文件对话框中的提示文本，如设置fileDesc为“请选择rar doc pdf文件”

fileExt ： 设置可以选择的文件的类型，格式如：'*.doc;*.pdf;*.rar' 。 

sizeLimit ： 上传文件的大小限制 。 

simUploadLimit ： 允许同时上传的个数 默认值：1 。 

buttonText ： 浏览按钮的文本，默认值：BROWSE 。 

buttonImg ： 浏览按钮的图片的路径 。 

hideButton ： 设置为true则隐藏浏览按钮的图片 。 

rollover ： 值为true和false，设置为true时当鼠标移到浏览按钮上时有反转效果。 

width ： 设置浏览按钮的宽度 ，默认值：110。 

height ： 设置浏览按钮的高度 ，默认值：30。 

wmode ： 设置该项为transparent 可以使浏览按钮的flash背景文件透明，并且flash文件会被置为页面的最高层。 默认值：opaque 。 

cancelImg ：选择文件到文件队列中后的每一个文件上的关闭按钮图标

上面介绍的key值的value都为字符串或是布尔类型，比较简单，接下来要介绍的key值的value为一个函数，可以在选择文件、出错或其他一些操作的时候返回一些信息给用户。

onInit : 做一些初始化的工作。

onSelect ：选择文件时触发，该函数有三个参数

event:事件对象。 

queueID：文件的唯一标识，由6为随机字符组成。 

fileObj：选择的文件对象，有name、size、creationDate、modificationDate、type 5个属性。 

代码：

 

前台：

先做一个[上传按钮]

作用:

是显示出上传界面层：

 <input type="button" onclick="openWindow()" class="btn_upload" />

再做一个层：

作用：

是用户上传的时候不能点击主页面，可以放在form上面。

 

 <div class="full_dark" id="full_dark" style="display: none">

    </div>

 

最后做[上传界面]：

                      

 <div style="position: relative;">

        <div class="imgLoad2" style="display: none">

            <div id="fileQueue">

            </div>

            <input type="file" name="uploadify" id="uploadify" />

            <p>

                <a href="javascript:$('#uploadify').uploadifyUpload()" class="btn1">上传</a><span class="null1">

                </span><a href="#" onclick="colseWindow()" class="btn2">取消</a>

            </p>

        </div>

    </div>

 

 

js代码：

 

    //图标上传

$("#uploadify").uploadify({

                'uploader': '../JS/jquery.uploadify-v2.1.0/uploadify.swf',

                'script': '../UploadHandler.ashx',

                'cancelImg': '../JS/jquery.uploadify-v2.1.0/cancel.png',

                'folder': '../UploadFile',

                'queueID': 'fileQueue',

                'fileDesc': "请选择png或者jpg格式图片",

                'fileExt': "*.jpg;*.png",

                //        'buttonImg': "../images/upload2.png",

                'auto': false,

                'buttonText': "浏 览",

                'multi': false,

                'onComplete': function (event, queueID, fileObj, response, data) {

                    //把上传图标的地址存到session

                    $.ajax({

                        type: "POST",

                        //dataType:"Text",  

                        url: "ashxs/setSession.ashx",

                        contentType: "application/x-www-form-urlencoded; charset=utf-8",

                        data: { key: "uploadIconUrl", value: "http://220.249.104.50:8083/UploadFile/" + fileObj.name },

                        success: function (msg) {

                            if (msg != "N") {

                                //上次图标后把勾上的系统图标隐藏

                                $(".checks").hide();

                                $("#imgUpload").attr("src", msg);

                                //                        alert("图片：" + fileObj.name + "，上传成功");

                            }

                        }

                    });

                    $("#full_dark").hide();

                    $(".imgLoad2").hide();

                },

                'onError': function (event, queueID, fileObj, errorObj) {

                    if (fileObj.size > "5271521") {

                        alert("请上传5M以下的图片");

                    }

                }

            });

 

增加的js：

 //隐藏上传图片的层

 

 function colseWindow() {

                $("#full_dark").hide();

                $(".imgLoad").hide();

                $(".imgLoad2").hide();

            }

 

//显示上传图片的层

 

 function openWindow() {

                $("#full_dark").show();

                $(".imgLoad").show();

                $(".imgLoad2").show();

            }

 

操作流程逻辑：

点击上传按钮后促发openWindow事件，弹出上传的层（class="imgLoad2"）,选择图片后点击确定上传（id="uploadify")，上传完成。