uploadify使用

jquery.uploadify.min.js

/*
Uploadify v3.2.1
Copyright (c) 2012 Reactive Apps, Ronnie Garcia
Released under the MIT License <http://www.opensource.org/licenses/mit-license.php>

SWFUpload: http://www.swfupload.org, http://swfupload.googlecode.com
mmSWFUpload 1.0: Flash upload dialog - http://profandesign.se/swfupload/,  http://www.vinterwebb.se/
SWFUpload is (c) 2006-2007 Lars Huring, Olov Nilzén and Mammon Media and is released under the MIT License:
http://www.opensource.org/licenses/mit-license.php
SWFUpload 2 is (c) 2007-2008 Jake Roberts and is released under the MIT License:
http://www.opensource.org/licenses/mit-license.php

SWFObject v2.2 <http://code.google.com/p/swfobject/> 
is released under the MIT License <http://www.opensource.org/licenses/mit-license.php>
*/
;var swfobject=function(){var aq="undefined",aD="object",ab="Shockwave Flash",X="ShockwaveFlash.ShockwaveFlash",aE="application/x-shockwave-flash",ac="SWFObjectExprInst",ax="onreadystatechange",af=window,aL=document,aB=navigator,aa=false,Z=[aN],aG=[],ag=[],al=[],aJ,ad,ap,at,ak=false,aU=false,aH,an,aI=true,ah=function(){var a=typeof aL.getElementById!=aq&&typeof aL.getElementsByTagName!=aq&&typeof aL.createElement!=aq,e=aB.userAgent.toLowerCase(),c=aB.platform.toLowerCase(),h=c?/win/.test(c):/win/.test(e),j=c?/mac/.test(c):/mac/.test(e),g=/webkit/.test(e)?parseFloat(e.replace(/^.*webkit\/(\d+(\.\d+)?).*$/,"$1")):false,d=!+"\v1",f=[0,0,0],k=null;if(typeof aB.plugins!=aq&&typeof aB.plugins[ab]==aD){k=aB.plugins[ab].description;if(k&&!(typeof aB.mimeTypes!=aq&&aB.mimeTypes[aE]&&!aB.mimeTypes[aE].enabledPlugin)){aa=true;d=false;k=k.replace(/^.*\s+(\S+\s+\S+$)/,"$1");f[0]=parseInt(k.replace(/^(.*)\..*$/,"$1"),10);f[1]=parseInt(k.replace(/^.*\.(.*)\s.*$/,"$1"),10);f[2]=/[a-zA-Z]/.test(k)?parseInt(k.replace(/^.*[a-zA-Z]+(.*)$/,"$1"),10):0;}}else{if(typeof af.ActiveXObject!=aq){try{var i=new ActiveXObject(X);if(i){k=i.GetVariable("$version");if(k){d=true;k=k.split(" ")[1].split(",");f=[parseInt(k[0],10),parseInt(k[1],10),parseInt(k[2],10)];}}}catch(b){}}}return{w3:a,pv:f,wk:g,ie:d,win:h,mac:j};}(),aK=function(){if(!ah.w3){return;}if((typeof aL.readyState!=aq&&aL.readyState=="complete")||(typeof aL.readyState==aq&&(aL.getElementsByTagName("body")[0]||aL.body))){aP();}if(!ak){if(typeof aL.addEventListener!=aq){aL.addEventListener("DOMContentLoaded",aP,false);}if(ah.ie&&ah.win){aL.attachEvent(ax,function(){if(aL.readyState=="complete"){aL.detachEvent(ax,arguments.callee);aP();}});if(af==top){(function(){if(ak){return;}try{aL.documentElement.doScroll("left");}catch(a){setTimeout(arguments.callee,0);return;}aP();})();}}if(ah.wk){(function(){if(ak){return;}if(!/loaded|complete/.test(aL.readyState)){setTimeout(arguments.callee,0);return;}aP();})();}aC(aP);}}();function aP(){if(ak){return;}try{var b=aL.getElementsByTagName("body")[0].appendChild(ar("span"));b.parentNode.removeChild(b);}catch(a){return;}ak=true;var d=Z.length;for(var c=0;c<d;c++){Z[c]();}}function aj(a){if(ak){a();}else{Z[Z.length]=a;}}function aC(a){if(typeof af.addEventListener!=aq){af.addEventListener("load",a,false);}else{if(typeof aL.addEventListener!=aq){aL.addEventListener("load",a,false);}else{if(typeof af.attachEvent!=aq){aM(af,"onload",a);}else{if(typeof af.onload=="function"){var b=af.onload;af.onload=function(){b();a();};}else{af.onload=a;}}}}}function aN(){if(aa){Y();}else{am();}}function Y(){var d=aL.getElementsByTagName("body")[0];var b=ar(aD);b.setAttribute("type",aE);var a=d.appendChild(b);if(a){var c=0;(function(){if(typeof a.GetVariable!=aq){var e=a.GetVariable("$version");if(e){e=e.split(" ")[1].split(",");ah.pv=[parseInt(e[0],10),parseInt(e[1],10),parseInt(e[2],10)];}}else{if(c<10){c++;setTimeout(arguments.callee,10);return;}}d.removeChild(b);a=null;am();})();}else{am();}}function am(){var g=aG.length;if(g>0){for(var h=0;h<g;h++){var c=aG[h].id;var l=aG[h].callbackFn;var a={success:false,id:c};if(ah.pv[0]>0){var i=aS(c);if(i){if(ao(aG[h].swfVersion)&&!(ah.wk&&ah.wk<312)){ay(c,true);if(l){a.success=true;a.ref=av(c);l(a);}}else{if(aG[h].expressInstall&&au()){var e={};e.data=aG[h].expressInstall;e.width=i.getAttribute("width")||"0";e.height=i.getAttribute("height")||"0";if(i.getAttribute("class")){e.styleclass=i.getAttribute("class");}if(i.getAttribute("align")){e.align=i.getAttribute("align");}var f={};var d=i.getElementsByTagName("param");var k=d.length;for(var j=0;j<k;j++){if(d[j].getAttribute("name").toLowerCase()!="movie"){f[d[j].getAttribute("name")]=d[j].getAttribute("value");}}ae(e,f,c,l);}else{aF(i);if(l){l(a);}}}}}else{ay(c,true);if(l){var b=av(c);if(b&&typeof b.SetVariable!=aq){a.success=true;a.ref=b;}l(a);}}}}}function av(b){var d=null;var c=aS(b);if(c&&c.nodeName=="OBJECT"){if(typeof c.SetVariable!=aq){d=c;}else{var a=c.getElementsByTagName(aD)[0];if(a){d=a;}}}return d;}function au(){return !aU&&ao("6.0.65")&&(ah.win||ah.mac)&&!(ah.wk&&ah.wk<312);}function ae(f,d,h,e){aU=true;ap=e||null;at={success:false,id:h};var a=aS(h);if(a){if(a.nodeName=="OBJECT"){aJ=aO(a);ad=null;}else{aJ=a;ad=h;}f.id=ac;if(typeof f.width==aq||(!/%$/.test(f.width)&&parseInt(f.width,10)<310)){f.width="310";}if(typeof f.height==aq||(!/%$/.test(f.height)&&parseInt(f.height,10)<137)){f.height="137";}aL.title=aL.title.slice(0,47)+" - Flash Player Installation";var b=ah.ie&&ah.win?"ActiveX":"PlugIn",c="MMredirectURL="+af.location.toString().replace(/&/g,"%26")+"&MMplayerType="+b+"&MMdoctitle="+aL.title;if(typeof d.flashvars!=aq){d.flashvars+="&"+c;}else{d.flashvars=c;}if(ah.ie&&ah.win&&a.readyState!=4){var g=ar("div");h+="SWFObjectNew";g.setAttribute("id",h);a.parentNode.insertBefore(g,a);a.style.display="none";(function(){if(a.readyState==4){a.parentNode.removeChild(a);}else{setTimeout(arguments.callee,10);}})();}aA(f,d,h);}}function aF(a){if(ah.ie&&ah.win&&a.readyState!=4){var b=ar("div");a.parentNode.insertBefore(b,a);b.parentNode.replaceChild(aO(a),b);a.style.display="none";(function(){if(a.readyState==4){a.parentNode.removeChild(a);}else{setTimeout(arguments.callee,10);}})();}else{a.parentNode.replaceChild(aO(a),a);}}function aO(b){var d=ar("div");if(ah.win&&ah.ie){d.innerHTML=b.innerHTML;}else{var e=b.getElementsByTagName(aD)[0];if(e){var a=e.childNodes;if(a){var f=a.length;for(var c=0;c<f;c++){if(!(a[c].nodeType==1&&a[c].nodeName=="PARAM")&&!(a[c].nodeType==8)){d.appendChild(a[c].cloneNode(true));}}}}}return d;}function aA(e,g,c){var d,a=aS(c);if(ah.wk&&ah.wk<312){return d;}if(a){if(typeof e.id==aq){e.id=c;}if(ah.ie&&ah.win){var f="";for(var i in e){if(e[i]!=Object.prototype[i]){if(i.toLowerCase()=="data"){g.movie=e[i];}else{if(i.toLowerCase()=="styleclass"){f+=' class="'+e[i]+'"';}else{if(i.toLowerCase()!="classid"){f+=" "+i+'="'+e[i]+'"';}}}}}var h="";for(var j in g){if(g[j]!=Object.prototype[j]){h+='<param name="'+j+'" value="'+g[j]+'" />';}}a.outerHTML='<object class);}}};})($);

css

/*
Uploadify
Copyright (c) 2012 Reactive Apps, Ronnie Garcia
Released under the MIT License <http://www.opensource.org/licenses/mit-license.php> 
*/

.uploadify {
    position: relative;
    margin-bottom: 1em;
}
.uploadify-button {
    background-color: #505050;
    background-image: linear-gradient(bottom, #505050 0%, #707070 100%);
    background-image: -o-linear-gradient(bottom, #505050 0%, #707070 100%);
    background-image: -moz-linear-gradient(bottom, #505050 0%, #707070 100%);
    background-image: -webkit-linear-gradient(bottom, #505050 0%, #707070 100%);
    background-image: -ms-linear-gradient(bottom, #505050 0%, #707070 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #505050),
        color-stop(1, #707070)
    );
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    border: 2px solid #808080;
    color: #FFF;
    font: bold 12px Arial, Helvetica, sans-serif;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    width: 100%;
}
.uploadify:hover .uploadify-button {
    background-color: #606060;
    background-image: linear-gradient(top, #606060 0%, #808080 100%);
    background-image: -o-linear-gradient(top, #606060 0%, #808080 100%);
    background-image: -moz-linear-gradient(top, #606060 0%, #808080 100%);
    background-image: -webkit-linear-gradient(top, #606060 0%, #808080 100%);
    background-image: -ms-linear-gradient(top, #606060 0%, #808080 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #606060),
        color-stop(1, #808080)
    );
    background-position: center bottom;
}
.uploadify-button.disabled {
    background-color: #D0D0D0;
    color: #808080;
}
.uploadify-queue {
    margin-bottom: 1em;
}
.uploadify-queue-item {
    background-color: #F5F5F5;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font: 11px Verdana, Geneva, sans-serif;
    margin-top: 5px;
    max-width: 350px;
    padding: 10px;
}
.uploadify-error {
    background-color: #FDE5DD !important;
}
.uploadify-queue-item .cancel a {
    background: url('uploadify-cancel.png') 0 0 no-repeat;
    float: right;
    height:    16px;
    text-indent: -9999px;
    width: 16px;
}
.uploadify-queue-item.completed {
    background-color: #E5E5E5;
}
.uploadify-progress {
    background-color: #E5E5E5;
    margin-top: 10px;
    width: 100%;
}
.uploadify-progress-bar {
    background-color: #0099FF;
    height: 3px;
    width: 1px;
}

调用

<%@ Page Language="C#" Inherits="SJBOOKSWeb.Common.ViewDetailPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>菜单编辑页</title>
    <meta content="text/html; charset=utf-8;" http-equiv="X-UA-Compatible" />
    <meta content="initial-scale=1, minimum-scale=1, width=device-width" name="viewport" />
    <link rel="stylesheet" type="text/css" href="../../../APP_CSS/reset.css" />
    <link type="text/css" rel="Stylesheet" href="../../../RefLib/ligerUI/skins/Aqua/css/ligerui-all.css" />
    <link rel="Stylesheet" type="text/css" href="../../../RefLib/WebControls/ValidForm/ValidForm.css" />
    <link href="../../../RefLib/Uploadify/uploadify.css" rel="stylesheet" />

    <style type="text/css">
        table {
            margin: 0 auto;
        }

            table tr {
                line-height: 30px;
            }

        .td_name {
            text-align: right;
            width: 100px;
        }

        .td_value {
            text-align: left;
            width: 350px;
        }
    </style>
</head>
<body>
    <div id="layout">
        <form class="Validform">

            <table>

                <tr>
                    <td class="td_name"><span class="need">*</span> 名称：</td>
                    <td class="td_value">
                        <input type="text" id="MEMO" name="MEMO" tabindex="3" class="inputxt" datatype="*1-200"
                            nullmsg="不能为空" errormsg="长度在1-50之间" />
                        <div class="Validform_checktip" style="margin-left: 2px"></div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="width: 99.9%">
                        <fieldset style="border: 1px solid; width: 99%; /* margin: 0 auto; */margin-left: 1%; margin-top: 10px; padding: 5px;">
                            <legend>文件</legend>
                            <input id="file_upload" name="file_upload" type="file" multiple="false" />
                            <div id="queue"></div>
                        </fieldset>
                    </td>

                </tr>
                <tr style="height: 60px">
                    <td class="td_name"><span class="need">*</span> 排序：</td>
                    <td class="td_value">
                        <input type="text" id="SORT" name="SORT" tabindex="3" class="inputxt" datatype="n1-10"
                            nullmsg="不能为空" errormsg="请输入数字" />
                        <div class="Validform_checktip" style="margin-left: 2px"></div>
                    </td>
                </tr>
            </table>

        </form>


    </div>


    <script type="text/javascript">
        var rootPath = "http://" + window.location.host;
        document.write("<sc" + "ript src='" + rootPath + "/RefLib/QuickhighJS/JSPackageManage.js?random=" + Math.random() + "'><\/scri" + "pt>");
    </script>
    <script type="text/javascript">JSDownload("1,2,9,10,3,8,4,5,6,21")</script>
    <script type="text/javascript">
        //相对路径
        var rootPath = "../../../";
        //参数信息
        var id = $.query.get("ID");
        var TYPE = $.query.get("TYPE");
        //按钮信息窗体
        var editeFrm = null;
        //是否新增状态
        var isAddNew = "" == id || "0" == id || null == id;
        //是否编辑状态
        var isEdit = !isAddNew;
        //覆盖本页面grid的loading效果
        LG.overrideGridLoading();

        //上传
        var savepath = "";
        var savefileObj = {};
        var FileSelected = 0;
        var FILE_PATH = "";
        var FILE_NAME = "";


        $('#file_upload').uploadify({
            //开启调试  
            'debug': false,
            //是否自动上传  
            'auto': false,
            'buttonText': '选择文件',
            //flash  
            'swf': "/RefLib/Uploadify/uploadify.swf",
            //文件选择后的容器ID  
            'queueID': 'queue',
            'uploader': '/WebHandler/UploadHandler.ashx?fileType=Rules',
            'width': '75',
            'height': '24',
            'multi': false,
            'fileTypeDesc': '支持的格式：',
            'fileSizeLimit': '50MB',
            'removeTimeout': 1,
            "uploadLimit": 1,
            'overrideEvents': ['onDialogClose', 'onUploadSuccess', 'onUploadError', 'onSelectError'],//重写提示信息，屏蔽掉自带的提示
            //返回一个错误，选择文件的时候触发  
            'onSelectError': function (file, errorCode, errorMsg) {
                switch (errorCode) {
                    case -100:
                        alert("上传的文件数量已经超出系统限制的" + $('#file_upload').uploadify('settings', 'uploadLimit') + "个文件！");
                        break;
                    case -110:
                        alert("文件 [" + file.name + "] 大小超出系统限制的" + $('#file_upload').uploadify('settings', 'fileSizeLimit') + "大小！");
                        break;
                    case -120:
                        alert("文件 [" + file.name + "] 大小异常！");
                        break;
                    case -130:
                        alert("文件 [" + file.name + "] 类型不正确！");
                        break;
                }
            },
            'onCancel': function (file) {
                //alert('The file ' + file.name + ' was cancelled!');
                FileSelected = 0;
            },
            //检测FLASH失败调用  
            'onFallback': function () {
                alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
            },
            'onSelect': function () {
                FileSelected = 1;
            },
            //上传到服务器，服务器返回相应信息到data里  
            'onUploadSuccess': function (file, data, response) {
                //alert(data);  
                data = JSON.parse(data);
                savefileObj = file;
                savepath = data.Data.SavePath;
                if (FileSelected == 1) {
                    FormToObject(data.Data.SavePath, file);
                }
            }
        });

        //文档加载完成
        $(function () {
            //初始化验证表单
            editeFrm = $(".Validform").Validform({
                //传入自定义datatype类型;
                datatype: {
                    "z1-20": /^[A-Za-z0-9]+$/,
                    "z0-10": /^([-+]?([0-9]{3})+(\.([0-9]{6})+)?)$|^([ ^\s]){0,}$/
                },
                showAllError: true,
                tiptype: function (msg, o, cssctl) {
                    if (!o.obj.is("form")) {
                        var objtip = null;
                        var liNode = $(o.obj).parents("li");
                        if (!liNode || liNode.length <= 0) {
                            objtip = o.obj.siblings(".Validform_checktip");
                        }
                        else {
                            objtip = $(liNode[0]).find(".Validform_checktip");
                        }
                        if (!objtip) return;
                        cssctl(objtip, o.type);
                        objtip.text(msg);
                    }
                }
            });
            if (isAddNew) {
            }
            else {
                LG.ajax({
                    loading: '正在获取数据中...',
                    type: "AjaxRuleManage",
                    method: "GetInfo",
                    data: { ID: id },
                    success: function (data) {
                        ObjectToForm(data);
                    },
                    error: function (message) {
                        alert(message);
                    }
                });
            }
        })
        //对象到Web表单绑定
        function ObjectToForm(data) {
            $("#SORT").val(data.RUL_SORT);
            $("#MEMO").val(data.RUL_NAME);
            FILE_PATH = (data.FILE_PATH);
            FILE_NAME = (data.FILE_NAME);
            id = data.RUL_INFO_ID;
            TYPE = data.RUL_TYPE;
            return;
        }
        //Web表单到对象绑定
        function FormToObject(path, file) {
            if (!editeFrm.check()) return;
            var dataObject = null || {};
            dataObject.IsAdded = isAddNew;
            //
            dataObject.RUL_INFO_ID = id;
            dataObject.RUL_SORT = $("#SORT").val();
            dataObject.RUL_NAME = $("#MEMO").val();
            dataObject.RUL_TYPE = TYPE;
            dataObject.RUL_URL = path || FILE_PATH;
            //if (file != null && file.name.length > 0) {
            //    dataObject.FILE_NAME = file.name;
            //} else {
            //    dataObject.FILE_NAME = FILE_NAME;
            //}
            _cb(dataObject);
            return dataObject;
        }
        //供打开页面调用的方法
        var _cb;//上传回调用
        function GetEditeData(cb) {
            _cb = cb;
            if (FileSelected == 1) {
                if (editeFrm.check())
                    $('#file_upload').uploadify('upload', '*');
            } else {
                if (isAddNew) {
                    LG.showError('必须选择一个文件');
                    return 0;
                } else {
                    FormToObject();
                }
            }
            return 0;
        }

    </script>
</body>
</html>

c#后台代码

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.Remoting.Contexts;
using System.Web;
using System.Web.Services;
using System.Web.SessionState;
using System.Web.UI.WebControls;
using SJBOOKSWeb.Common;
using SJBOOKSWeb.WebHandler;

namespace SJBOOKSWeb.WebHandler
{
    
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class UploadHandler :IHttpHandler, IRequiresSessionState
    {
        private HttpContext context = null;
        public void ProcessRequest(HttpContext _context)
        {
            _context.Response.ContentType = "text/plain";
            _context.Response.Charset = "utf-8";
            context = _context;
            HttpPostedFile file = context.Request.Files["Filedata"];

            string fileType = context.Request["fileType"].ToString();//文件上传子目录
            if (string.IsNullOrEmpty(fileType))
            {
                fileType = "Other";
            }

            #region 上传文本保存的根目录

            if (!Directory.Exists(context.Server.MapPath("\\uploads\\")))
            {
                Directory.CreateDirectory(context.Server.MapPath("\\uploads\\"));
            }
            string uploadPath = context.Server.MapPath("\\uploads\\");

            #endregion

            var ret = new UploadRet();
            string _path = string.Empty;
            if (file == null)
                return;

            #region 自动管理文件名以及存放路径

            if (!Directory.Exists(uploadPath))
            {
                Directory.CreateDirectory(uploadPath);
            }

            _path = CreateSaveDir("\\uploads\\" + fileType);
            _path += DateTime.Now.ToString("yyyyMMddHHmmss") + "." + file.FileName.Split('.')[file.FileName.Split('.').Length - 1];
            file.SaveAs(context.Server.MapPath(_path));

            #endregion

            ret.SavePath = _path;

            context.Response.Write(AjaxResult.Success(ret).ToString());
        }

        /// <summary>
        /// 目录管理
        /// </summary>
        /// <param name="dir"></param>
        /// <returns></returns>
        private string CreateSaveDir(string dir)
        {
            try
            {

                dir += "\\" + DateTime.Now.ToString("yyyyMM"); //年月
                if (!Directory.Exists(context.Server.MapPath(dir)))
                {
                    Directory.CreateDirectory(context.Server.MapPath(dir));
                }
                return dir + "\\";

            }
            catch (Exception)
            {
                throw;
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }


    /// <summary>
    /// 上传后统一返回类
    /// PS:所有的返回请使用这个类，不要修改原来的已经存在属性，如果你获取新的返回信息，请添加一个新的属性即可
    /// </summary>
    class UploadRet
    {
        public string SavePath { get; set; }
    }
}