uploadify初体验

js调用

$("#fileInput1").uploadify({
            'uploader': 'images/uploadify.swf',
            'script': 'uploadfile.aspx',
            'cancelImg': 'images/cancel.png',
            'auto': false,
            'multi': true,
            'sizeLimit':1024*1024*1024*1,
            'simUploadLimit':1,//允许同时上传的个数
'queueSizeLimit':5,//当允许多文件生成时，设置选择文件的个数，默认值：999 。
'fileDesc':'请选择rar doc pdf文件',//提示
'fileExt':'*.doc;*.pdf;*.rar',//要求
'onSelectOnce':function (event,data){fileOkAndKiss(data);},
            'onCancel':function (event,queueId,fileObj,data){fileOkAndKiss(data);},
            'onProgress':function(event,queueId,fileObj,data){
                  $("#showoldfileName").html("<table id='tablefile'><tr><td align=left>文件名</td><td>文件大小</td></tr></table>");
//                window.location.reload();
//                return;
//上传时触发
//完成百分比  当前上传多少  总工上传多少   上传速度（可以做判断 》1024 为M  小于则KB）
//$("#sa").html(data.percentage+" % <br>"+Math.round(data.bytesLoaded/1024/1024)+"MB<br>"+Math.round(data.allBytesLoaded/1024/1024)+"MB<br>"+Math.round(data.speed)+"KB");
            },
            'onError':function(event,queueId,fileObj,errorObj)
            {
                //错误时触发
//错误的类型，有三种‘HTTP’, ‘IO’, or ‘Security’//错误的描述
                $("Span5").html(errorObj.type+"<br>"+errorObj.info).css("color","red");
            },
            'onComplete':function(event,queueId,fileObj,response,data)
            {
                $("#Span2").html("剩余文件："+data.fileCount);
                //把路径放到数组里边  最后统一插入到数据库
//var  t=response.split('*')[0]  //.split('~/')[1];
var  t=response.split('*')[0];
                if(t!="0")
                {
                    fs="<tr><td align=left>"+fileObj.name+"</td><td>"+fileBytehandle(fileObj.size)+"</td></tr>";
                    $(fs).appendTo($("#tablefile"));
                    fileArrayString+=t+','+fileObj.name+','+fileBytehandle(fileObj.size)+'!';
                }
                
            },
            'onAllComplete':function(event,data){
                                 
                //提交到数据库
var a=QLflow.savaFile(fileArrayString,tmpid,ndid,nuid);
                if(a==0)
                    alert("上传文件失败");
                 //上传完毕 然后清空
                 fileArrayString="";
                //提示总工上传的个数  已上传的  错误的  最后提示正确的已插入的数据库中
            }
            
        });

c#代码 

protectedvoid Page_Load(object sender, EventArgs e)
    {
        Server.Execute("LoginAPI.aspx");
        try
        {
            //获取上传的文件数据
            HttpPostedFile file = Request.Files["Filedata"];    
            string fileName = file.FileName;
            //由于不同浏览器取出的FileName不同（有的是文件绝对路径，有的是只有文件名），故要进行处理
if (fileName.IndexOf('\\') >-1)    
            {
                fileName = fileName.Substring(fileName.LastIndexOf('\\') +1);
            }
            elseif (fileName.IndexOf('/') >-1)
            {
                fileName = fileName.Substring(fileName.LastIndexOf('/') +1);
            }

            //上传的目录
string uploadDir ="~/upload/";
            //上传的路径
string uploadPath = uploadDir + Guid.NewGuid() + fileName.Replace(",","(逗号)");
            //保存到数据库

            //保存文件
            file.SaveAs(Server.MapPath(uploadPath));
            //下面这句代码缺少的话，上传成功后上传队列的显示不会自动消失
            //Response.Write("1");
            Response.Write(uploadPath+"*");
        }
        catch
        {
            Response.Write("0*");
        }
    }

html

<div class="tob">
                                <table id="ft" cellpadding="0" cellspacing="0" border="1" style="top:10px; position:relative; 90%; text-align:center;">
                                <tr>
                                    <td>项目名称</td>
                                    <td><input id="Text21" type="text"   readonly/></td>
                                </tr>
                                <tr id="upfile">
                                    <td>上传设计文档</td>
                                    <td >
                                    <br />
                                        <span id="Span0"></span>&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span id="Span1"></span>&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span id="Span2"></span>&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span id="Span5"></span><br />
                                         <div id="fileInput1"></div>
                                         <a href="javascript:$('#fileInput1').uploadifyUpload()">上传</a>| 
                                         <a href="javascript:$('#fileInput1').uploadifyClearQueue()">取消上传</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>已上传的设计文档</td>
                                </tr>
                                </table>
                                </div>

jquery.uploadify.v2.1.0.min.js

//if(jQuery){(function(a){a.extend(a.fn,{uploadify:function(b){a(this).each(function(){settings=a.extend({id:a(this).attr("id"),uploader:"uploadify.swf",script:"uploadify.php",expressInstall:null,folder:"",height:30,110,cancelImg:"cancel.png",wmode:"opaque",scriptAccess:"sameDomain",fileDataName:"Filedata",method:"POST",queueSizeLimit:999,simUploadLimit:1,queueID:false,displayData:"percentage",onInit:function(){},onSelect:function(){},onQueueFull:function(){},onCheck:function(){},onCancel:function(){},onError:function(){},onProgress:function(){},onComplete:function(){},onAllComplete:function(){}},b);var e=location.pathname;e=e.split("/");e.pop();e=e.join("/")+"/";var f={};f.uploadifyID=settings.id;f.pagepath=e;if(settings.buttonImg){f.buttonImg=escape(settings.buttonImg)}if(settings.buttonText){f.buttonText=escape(settings.buttonText)}if(settings.rollover){f.rollover=true}f.script=settings.script;f.folder=escape(settings.folder);if(settings.scriptData){var g="";for(var d in settings.scriptData){g+="&"+d+"="+settings.scriptData[d]}f.scriptData=escape(g.substr(1))}f.width=settings.width;f.height=settings.height;f.wmode=settings.wmode;f.method=settings.method;f.queueSizeLimit=settings.queueSizeLimit;f.simUploadLimit=settings.simUploadLimit;if(settings.hideButton){f.hideButton=true}if(settings.fileDesc){f.fileDesc=settings.fileDesc}if(settings.fileExt){f.fileExt=settings.fileExt}if(settings.multi){f.multi=true}if(settings.auto){f.auto=true}if(settings.sizeLimit){f.sizeLimit=settings.sizeLimit}if(settings.checkScript){f.checkScript=settings.checkScript}if(settings.fileDataName){f.fileDataName=settings.fileDataName}if(settings.queueID){f.queueID=settings.queueID}if(settings.onInit()!==false){a(this).css("display","none");a(this).after('<div id="'+a(this).attr("id")+'Uploader"></div>');swfobject.embedSWF(settings.uploader,settings.id+"Uploader",settings.width,settings.height,"9.0.24",settings.expressInstall,f,{quality:"high",wmode:settings.wmode,allowScriptAccess:settings.scriptAccess});if(settings.queueID==false){a("#"+a(this).attr("id")+"Uploader").after('<div id="'+a(this).attr("id")+'Queue" class="uploadifyQueue"></div>')}}if(typeof(settings.onOpen)=="function"){a(this).bind("uploadifyOpen",settings.onOpen)}a(this).bind("uploadifySelect",{action:settings.onSelect,queueID:settings.queueID},function(j,h,i){if(j.data.action(j,h,i)!==false){var k=Math.round(i.size/1024*100)*0.01;var l="KB";if(k>1000){k=Math.round(k*0.001*100)*0.01;l="MB"}var m=k.toString().split(".");if(m.length>1){k=m[0]+"."+m[1].substr(0,2)}else{k=m[0]}if(i.name.length>20){fileName=i.name.substr(0,20)+"..."}else{fileName=i.name}queue="#"+a(this).attr("id")+"Queue";if(j.data.queueID){queue="#"+j.data.queueID}a(queue).append('<div id="'+a(this).attr("id")+h+'" class="uploadifyQueueItem"><div class="cancel"><a href="javascript:jQuery(\'#'+a(this).attr("id")+"').uploadifyCancel('"+h+'\')"><img src="'+settings.cancelImg+'" border="0" /></a></div><span class="fileName">'+fileName+" ("+k+l+')</span><span class="percentage"></span><div class="uploadifyProgress"><div id="'+a(this).attr("id")+h+'ProgressBar" class="uploadifyProgressBar"><!--Progress Bar--></div></div></div>')}});if(typeof(settings.onSelectOnce)=="function"){a(this).bind("uploadifySelectOnce",settings.onSelectOnce)}a(this).bind("uploadifyQueueFull",{action:settings.onQueueFull},function(h,i){if(h.data.action(h,i)!==false){alert("The queue is full.  The max size is "+i+".")}});a(this).bind("uploadifyCheckExist",{action:settings.onCheck},function(m,l,k,j,o){var i=new Object();i=k;i.folder=e+j;if(o){for(var h in k){var n=h}}a.post(l,i,function(r){for(var p in r){if(m.data.action(m,l,k,j,o)!==false){var q=confirm("Do you want to replace the file "+r[p]+"?");if(!q){document.getElementById(a(m.target).attr("id")+"Uploader").cancelFileUpload(p,true,true)}}}if(o){document.getElementById(a(m.target).attr("id")+"Uploader").startFileUpload(n,true)}else{document.getElementById(a(m.target).attr("id")+"Uploader").startFileUpload(null,true)}},"json")});a(this).bind("uploadifyCancel",{action:settings.onCancel},function(l,h,k,m,j){if(l.data.action(l,h,k,m,j)!==false){var i=(j==true)?0:250;a("#"+a(this).attr("id")+h).fadeOut(i,function(){a(this).remove()})}});if(typeof(settings.onClearQueue)=="function"){a(this).bind("uploadifyClearQueue",settings.onClearQueue)}var c=[];a(this).bind("uploadifyError",{action:settings.onError},function(l,h,k,j){if(l.data.action(l,h,k,j)!==false){var i=new Array(h,k,j);c.push(i);a("#"+a(this).attr("id")+h+" .percentage").text(" - "+j.type+" Error");a("#"+a(this).attr("id")+h).addClass("uploadifyError")}});a(this).bind("uploadifyProgress",{action:settings.onProgress,toDisplay:settings.displayData},function(j,h,i,k){if(j.data.action(j,h,i,k)!==false){a("#"+a(this).attr("id")+h+"ProgressBar").css("width",k.percentage+"%");if(j.data.toDisplay=="percentage"){displayData=" - "+k.percentage+"%"}if(j.data.toDisplay=="speed"){displayData=" - "+k.speed+"KB/s"}if(j.data.toDisplay==null){displayData=" "}a("#"+a(this).attr("id")+h+" .percentage").text(displayData)}});a(this).bind("uploadifyComplete",{action:settings.onComplete},function(k,h,j,i,l){if(k.data.action(k,h,j,unescape(i),l)!==false){a("#"+a(this).attr("id")+h+" .percentage").text(" - Completed");a("#"+a(this).attr("id")+h).fadeOut(250,function(){a(this).remove()})}});if(typeof(settings.onAllComplete)=="function"){a(this).bind("uploadifyAllComplete",{action:settings.onAllComplete},function(h,i){if(h.data.action(h,i)!==false){c=[]}})}})},uploadifySettings:function(f,j,c){var g=false;a(this).each(function(){if(f=="scriptData"&&j!=null){if(c){var i=j}else{var i=a.extend(settings.scriptData,j)}var l="";for(var k in i){l+="&"+k+"="+escape(i[k])}j=l.substr(1)}g=document.getElementById(a(this).attr("id")+"Uploader").updateSettings(f,j)});if(j==null){if(f=="scriptData"){var b=unescape(g).split("&");var e=new Object();for(var d=0;d<b.length;d++){var h=b[d].split("=");e[h[0]]=h[1]}g=e}return g}},uploadifyUpload:function(b){a(this).each(function(){document.getElementById(a(this).attr("id")+"Uploader").startFileUpload(b,false)})},uploadifyCancel:function(b){a(this).each(function(){document.getElementById(a(this).attr("id")+"Uploader").cancelFileUpload(b,true,false)})},uploadifyClearQueue:function(){a(this).each(function(){document.getElementById(a(this).attr("id")+"Uploader").clearFileUploadQueue(false)})}})})(jQuery)};

if(jQuery) {
    (function (a) {
        a.extend(a.fn,{
            uploadify:function (b) {
                a(this).each(function () {
                    settings=a.extend({
                        id:a(this).attr("id"),uploader:"uploadify.swf",script:"uploadify.php",expressInstall:null,folder:"",height:30,110,cancelImg:"cancel.png",wmode:"opaque",scriptAccess:"sameDomain",fileDataName:"Filedata",method:"POST",queueSizeLimit:999,simUploadLimit:1,queueID:false,displayData:"percentage",onInit:function () {
                        },onSelect:function () {
                        },onQueueFull:function () {
                        },onCheck:function () {
                        },onCancel:function () {
                        },onError:function () {
                        },onProgress:function () {
                        },onComplete:function () {
                        },onAllComplete:function () {
                        }
                    },b);
                    var e=location.pathname;
                    e=e.split("/");
                    e.pop();
                    e=e.join("/")+"/";
                    var f={
                    };
                    f.uploadifyID=settings.id;
                    f.pagepath=e;
                    if(settings.buttonImg) {
                        f.buttonImg=escape(settings.buttonImg)
                    }if(settings.buttonText) {
                        f.buttonText=escape(settings.buttonText)
                    }if(settings.rollover) {
                        f.rollover=true
                    }f.script=settings.script;
                    f.folder=escape(settings.folder);
                    if(settings.scriptData) {
                        var g="";
                        for(var d in settings.scriptData) {
                            g+="&"+d+"="+settings.scriptData[d]
                        }f.scriptData=escape(g.substr(1))
                    }f.width=settings.width;
                    f.height=settings.height;
                    f.wmode=settings.wmode;
                    f.method=settings.method;
                    f.queueSizeLimit=settings.queueSizeLimit;
                    f.simUploadLimit=settings.simUploadLimit;
                    if(settings.hideButton) {
                        f.hideButton=true
                    }if(settings.fileDesc) {
                        f.fileDesc=settings.fileDesc
                    }if(settings.fileExt) {
                        f.fileExt=settings.fileExt
                    }if(settings.multi) {
                        f.multi=true
                    }if(settings.auto) {
                        f.auto=true
                    }if(settings.sizeLimit) {
                        f.sizeLimit=settings.sizeLimit
                    }if(settings.checkScript) {
                        f.checkScript=settings.checkScript
                    }if(settings.fileDataName) {
                        f.fileDataName=settings.fileDataName
                    }if(settings.queueID) {
                        f.queueID=settings.queueID
                    }if(settings.onInit()!==false) {
                        a(this).css("display","none");
                        a(this).after('<div id="'+a(this).attr("id")+'Uploader"></div>');
                        swfobject.embedSWF(settings.uploader,settings.id+"Uploader",settings.width,settings.height,"9.0.24",settings.expressInstall,f,{
                            quality:"high",wmode:settings.wmode,allowScriptAccess:settings.scriptAccess
                        });
                        if(settings.queueID==false) {
                            a("#"+a(this).attr("id")+"Uploader").after('<div id="'+a(this).attr("id")+'Queue" class="uploadifyQueue"></div>')
                        }
                    }if(typeof(settings.onOpen)=="function") {
                        a(this).bind("uploadifyOpen",settings.onOpen)
                    }a(this).bind("uploadifySelect",{
                        action:settings.onSelect,queueID:settings.queueID
                    },function (j,h,i) {
                        if(j.data.action(j,h,i)!==false) {
//                            var k=Math.round(i.size/1024*100)*0.01;
//                            var l="KB";
//                            if(k>1000) {
//                                k=Math.round(k*0.001*100)*0.01;
//                                l="MB"
//                            }
//高楠
var k=Math.round(i.size/1024);
var l="KB";
                            if(k>1024) {
                                k=Math.round(k/1024);
                                l="MB"
                            }
//end
var m=k.toString ().split(".");
                            if(m.length>1) {
                                k=m[0]+"."+m[1].substr(0,2)
                            }else {
                                k=m[0]
                            }if(i.name.length>20) {
                                fileName=i.name.substr(0,20)+"..."
                            }else {
                                fileName=i.name
                            }queue="#"+a(this).attr("id")+"Queue";
                            if(j.data.queueID) {
                                queue="#"+j.data.queueID
                            }a(queue).append('<div id="'+a(this).attr("id")+h+'" class="uploadifyQueueItem"><div class="cancel"><a href="javascript:jQuery(\'#'+a(this).attr("id")+"').uploadifyCancel('"+h+'\')"><img src="'+settings.cancelImg+'" border="0" /></a></div><span class="fileName">'+fileName+" ("+k+l+')</span><span class="percentage"></span><div class="uploadifyProgress"><div id="'+a(this).attr("id")+h+'ProgressBar" class="uploadifyProgressBar"><!--Progress Bar--></div></div></div>')
                        }
                    });
                    if(typeof(settings.onSelectOnce)=="function") {
                        a(this).bind("uploadifySelectOnce",settings.onSelectOnce)
                    }a(this).bind("uploadifyQueueFull",{
                        action:settings.onQueueFull
                    },function (h,i) {
                        if(h.data.action(h,i)!==false) {
                            alert("一次最多上传"+i+"个文件");
                            //alert("The queue is full.  The max size is "+i+".")
                        }
                    });
                    a(this).bind("uploadifyCheckExist",{
                        action:settings.onCheck
                    },function (m,l,k,j,o) {
                        var i=new Object();
                        i=k;
                        i.folder=e+j;
                        if(o) {
                            for(var h in k) {
                                var n=h
                            }
                        }a.post(l,i,function (r) {
                            for(var p in r) {
                                if(m.data.action(m,l,k,j,o)!==false) {
                                    var q=confirm("Do you want to replace the file "+r[p]+"?");
                                    if(!q) {
                                        document.getElementById(a(m.target).attr("id")+"Uploader").cancelFileUpload(p,true,true)
                                    }
                                }
                            }if(o) {
                                document.getElementById(a(m.target).attr("id")+"Uploader").startFileUpload(n,true)
                            }else {
                                document.getElementById(a(m.target).attr("id")+"Uploader").startFileUpload(null,true)
                            }
                        },"json")
                    });
                    a(this).bind("uploadifyCancel",{
                        action:settings.onCancel
                    },function (l,h,k,m,j) {
                        if(l.data.action(l,h,k,m,j)!==false) {
                            var i=(j==true)?0:250;
                            a("#"+a(this).attr("id")+h).fadeOut(i,function () {
                                a(this).remove()
                            })
                        }
                    });
                    if(typeof(settings.onClearQueue)=="function") {
                        a(this).bind("uploadifyClearQueue",settings.onClearQueue)
                    }var c=[];
                    a(this).bind("uploadifyError",{
                        action:settings.onError
                    },function (l,h,k,j) {
                        if(l.data.action(l,h,k,j)!==false) {
                            var i=new Array(h,k,j);
                            c.push(i);
                            //高楠
if(j.type=="File Size")
                            {
                                alert("文件大小不能超过1G");    
                            }
                            //end
                            a("#"+a(this).attr("id")+h+" .percentage").text(" - "+j.type+" Error");
                            a("#"+a(this).attr("id")+h).addClass("uploadifyError")
                        }
                    });
                    a(this).bind("uploadifyProgress",{
                        action:settings.onProgress,toDisplay:settings.displayData
                    },function (j,h,i,k) {
                        if(j.data.action(j,h,i,k)!==false) {
                            a("#"+a(this).attr("id")+h+"ProgressBar").css("width",k.percentage+"%");
                            if(j.data.toDisplay=="percentage") {
                                //displayData=" - "+k.percentage+"%"
//高楠
var gnk="";
                                if(k.speed<1024)
                                {
                                    gnk=k.speed+"KB/s";
                                }else
                                {
                                    gnk=Math.round(k.speed/1024)+"M/s";
                                }
                                displayData="-"+k.percentage+"%"+"-"+gnk;
                                //end
                            }if(j.data.toDisplay=="speed") {                               
                                displayData="-"+k.speed+"KB/s"
                            }if(j.data.toDisplay==null) {
                                displayData=""
                            }a("#"+a(this).attr("id")+h+" .percentage").text(displayData)
                        }
                    });
                    a(this).bind("uploadifyComplete",{
                        action:settings.onComplete
                    },function (k,h,j,i,l) {
                        if(k.data.action(k,h,j,unescape(i),l)!==false) {
                            a("#"+a(this).attr("id")+h+" .percentage").text(" - Completed");
                            a("#"+a(this).attr("id")+h).fadeOut(250,function () {
                                a(this).remove()
                            })
                        }
                    });
                    if(typeof(settings.onAllComplete)=="function") {
                        a(this).bind("uploadifyAllComplete",{
                            action:settings.onAllComplete
                        },function (h,i) {
                            if(h.data.action(h,i)!==false) {
                                c=[]
                            }
                        })
                    }
                })
            },uploadifySettings:function (f,j,c) {
                var g=false;
                a(this).each(function () {
                    if(f=="scriptData"&&j!=null) {
                        if(c) {
                            var i=j
                        }else {
                            var i=a.extend(settings.scriptData,j)
                        }var l="";
                        for(var k in i) {
                            l+="&"+k+"="+escape(i[k])
                        }j=l.substr(1)
                    }g=document.getElementById(a(this).attr("id")+"Uploader").updateSettings(f,j)
                });
                if(j==null) {
                    if(f=="scriptData") {
                        var b=unescape(g).split("&");
                        var e=new Object();
                        for(var d=0;d<b.length;d++) {
                            var h=b[d].split("=");
                            e[h[0]]=h[1]
                        }g=e
                    }return g
                }
            },uploadifyUpload:function (b) {
                a(this).each(function () {
                    document.getElementById(a(this).attr("id")+"Uploader").startFileUpload(b,false)
                })
            },uploadifyCancel:function (b) {
                a(this).each(function () {
                    document.getElementById(a(this).attr("id")+"Uploader").cancelFileUpload(b,true,false)
                })
            },uploadifyClearQueue:function () {
                a(this).each(function () {
                    document.getElementById(a(this).attr("id")+"Uploader").clearFileUploadQueue(false)
                })
            }
        })
    })(jQuery)
};

uploadify改名: 在后台文件

if (Session["change"] == null)
            {
                fileName = "JH.dbf";
                Session["change"] = fileName;
            }
            else
            {
                fileName = "XM.dbf";
                Session.Remove("change");
            }