jQuery上傳插件-uploadify3.1使用說明

uploadify ，簡單實用的flash上傳組件，兼容性良好。 現已有html5版本。

官方地址：http://www.uploadify.com/

官方英文文檔：http://www.uploadify.com/documentation/

Demos    Download

 使用方法(.net版本):

 前台JS

               $("#id").uploadify({ 
          
          height: 30, 
          
                        swf: '/uploadify/uploadify.swf', 
           
          
                        uploader: '/Handler/uploadPic.ashx', 
           
          
                        width: 120, 
           
          
                        cancelImg: '/uploadify/uploadify-cancel.png', 
           
          
                        buttonText: '選擇圖片', 
           
          
                        fileTypeExts: '*.gif;*.jpg;*.jpeg;*.png', 
           
          
                        'fileSizeLimit': '6000KB', 
           
          
                        removeCompleted: false, 
           
          
                        'formData': { 
           
          
                            "id":"1" 
           
          
                        }, 
           
          
                        onUploadSuccess: function (file, data, response) {//上傳完成時觸發（每個文件觸發一次） 
           
          
                            if (data.indexOf('錯誤提示') > -1) { 
           
          
                                alert(data); 
           
          
                            } 
           
          
                            else { 
           
          
                                //$("#previewImage").attr("src", data.substr(2)).hide().fadeIn(2000); 
           
          
                                alert("上傳成功！"); 
           
          
                            } 
           
          
                        }, 
           
          
                        'onUploadError': function (file, errorCode, errorMsg, errorString) {//當單個文件上傳出錯時觸發 
           
          
                            alert('文件：' + file.name + ' 上傳失敗: ' + errorString); 
           
          
                        } 
               }); 
          
 
          
 
         

 

 ASHX文件：

         

                    
          
 
          protected  
          string 
           AllowExt =  
          " 
          7z|aiff|asf|avi|bmp|csv|doc|docx|fla|flv|gif|gz|gzip|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|ods|odt|pdf|png|ppt|pptx|pxd|qt|ram|rar|rm|rmi|rmvb|rtf|sdc|sitd|swf|sxc|sxw|tar|tgz|tif|tiff|txt|vsd|wav|wma|wmv|xls|xlsx|xml|zip 
          " 
          ; 
          // 
          支持的文件格式  
          
          
         

int FileMaxSize = 10240;//文件大小，單位為Kpublicvoid ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string ParentID = context.Request.Params["id"];
            HttpPostedFile fileUpload = context.Request.Files[0];
            if (fileUpload != null)
            {
                try
                {
                    string UploadDir = "~/upload/";//圖片保存的文件夾
                    //圖片保存的文件夾路徑
                    string path = context.Server.MapPath(UploadDir);
                    //每天上傳的圖片一個文件夾
                    string folder = DateTime.Now.ToString("yyyyMM");
                    //如果文件夾不存在，則創建
                    if (!Directory.Exists(path + folder))
                    {
                        Directory.CreateDirectory(path + folder);
                    }
                    //上傳圖片的擴展名
                    string fileExtension = fileUpload.FileName.Substring(fileUpload.FileName.LastIndexOf('.'));
                    //判斷文件格式
                    if (!CheckValidExt(fileExtension))
                    {
                        context.Response.Write("錯誤提示：文件格式不正確！" + fileExtension);
                        return;
                    }
                    //判斷文件大小
                    if (fileUpload.ContentLength > FileMaxSize * 1024)
                    {
                        context.Response.Write("錯誤提示：上傳的文件(" + fileUpload.FileName + ")超過最大限制：" + FileMaxSize + "KB");
                        return;
                    }
                    //保存圖片的文件名
                    //string saveName = Guid.NewGuid().ToString() + fileExtension;
                    //使用時間+隨機數重命名文件
                    string strDateTime = DateTime.Now.ToString("yyMMddhhmmssfff");//取得時間字符串
                    Random ran = new Random();
                    string strRan = Convert.ToString(ran.Next(100, 999));//生成三位隨機數
                    string saveName = strDateTime + strRan + fileExtension;

                    Model.Album uc = new Model.Album();

                    uc.Title = fileUpload.FileName;
                    uc.ImagePath = folder + "/" + saveName;
                    uc.PostTime = DateTime.Now; 
                    uc.Pid= int.Parse(id);
                    bll.Album alb = new bll.Album();
                    alb.add(uc);

                    //保存圖片
                    fileUpload.SaveAs(path + folder + "/" + saveName);
                    context.Response.Write(UploadDir + folder + "/" + saveName);
                }
                catch
                {
                    context.Response.Write("錯誤提示：上傳失敗");
                }

            }

        }


        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

        #region 檢測擴展名的有效性 bool CheckValidExt(string sExt) 
        /// <summary>
        /// 檢測擴展名的有效性
        /// </summary>
        /// <param name="sExt">文件名擴展名</param>
        /// <returns>如果擴展名有效,返回true,否則返回false.</returns>
        public bool CheckValidExt(string strExt)
        {
            bool flag = false;
            string[] arrExt = AllowExt.Split('|');
            foreach (string filetype in arrExt)
            {
                if (filetype.ToLower() == strExt.ToLower().Replace(".", ""))
                {
                    flag = true;
                    break;
                }
            }
            return flag;
        }
        #endregion

 

 參數說明：

參考 http://www.cnblogs.com/luohu/archive/2011/12/16/2290135.html#commentform

 

3.1 版本更新 ： 去除postData，更改為formData。  Json數據。  其他更改研究中。

 

上傳文件生成縮略圖，將縮略圖以data為參數傳回頁面顯示到准備好的容器中。

onUploadSuccess:  function (file, data, response) { // 上傳完成時觸發（每個文件觸發一次）
                     if (data.indexOf('錯誤提示') > -1) {
                        alert(data);
                    }
                     else {
                         // $("#previewImage").attr("src", data.substr(2)).hide().fadeIn(2000);
                        alert("上傳成功！");
                        jQuery("#albumList").append("<img src='"+data+"' />");

                    }
                },
                'onUploadError':  function (file, errorCode, errorMsg, errorString) { // 當單個文件上傳出錯時觸發
                    alert('文件：' + file.name + ' 上傳失敗: ' + errorString);} 

       

參考： http://www.cnblogs.com/luohu/archive/2011/12/16/2290135.html#commentform