【Jquery】利用泛型處理常式與ajaxfileupload做檔案上傳

2011-05-19

15949
0

摘要:【Jquery】利用泛型處理常式與ajaxfileupload做檔案上傳

今天遇到一個case，是要做檔案上傳的，當然如果用.NET內建的FileUpload以前就做過了，所以這次想嘗試用不同的方式上傳檔案，當然不同的方式就是指利用Jquery搭配ajax來做檔案上傳的動作，網路上找了找，發現有個套件還蠻多人用的，就是ajaxfileupload，要先去官方網站下載套件，解壓縮以後裡面還蠻多已經先寫好的範例等，但我個人只抓了ajaxfileupload.js和他的loading.gif 轉轉轉圖片，接著接下來就是程式碼部分，或是可以看這篇或是這篇都寫得蠻詳細的，首先是js部分

updata.aspx

$("#upload").click(function(){
            //這段是呼叫轉轉轉圖片
             $("#loading").ajaxStart(function(){
             $(this).show();
         }).ajaxComplete(function(){
             $(this).hide();
         });
          //這段是參數設定,而這裡我是用.ashx處理
          $.ajaxFileUpload({
               url: "update.ashx",
               secureuri: false,
               fileElementId: "fileupload",
               dataType: "json",
              success: function(data,status){
               alert("成功")
              },
              error: function (data, status, e)
              {
                  alert("失敗");
              }
          });
);

updata.aspx HTML

update.ashx

HttpFileCollection files = context.Request.Files;
            string msg = string.Empty;
            string error = string.Empty;
            if (files.Count > 0)
            {
                files[0].SaveAs(System.Web.HttpContext.Current.Server.MapPath("~/images/") + System.IO.Path.GetFileName(files[0].FileName));
                msg = "成功" + files[0].ContentLength;
                string res = "{ error:'" + error + "', msg:'" + msg + "'}";
                context.Response.Write(res);
                context.Response.End();
            }

其實原本的那些範例都是在.aspx的Page_Load裡面做，可是因為還蠻多地方都要用到上傳檔案這個程式，所以乾脆想說直接做在.ashx裡面，原本上傳檔案後還要在記錄一些欄位的資料，可是功力不夠還不是很清楚怎麼修改成我要的，所以我用最阿呆的方式就是直接在加個$.ajax的程式碼在傳一次給sever資料做儲存，等於說按一次button傳了兩次資料，但因為我還沒研究出來怎麼改寫，所以就先暫時用這個方法先，如果有人有更好的處理方式，還請各位前輩不吝嗇的指導

回首頁