1. 程式人生 > >使用Ajax和一般處理程序實現文件上傳與下載

使用Ajax和一般處理程序實現文件上傳與下載

chang header text har set filename 文件名 dem 獲取

  1.使用HTML的input標簽

    <input type="file" multiple="multiple" id="file_load" />

  2.使用JS為input的file添加一個change事件

      $(‘#file_load‘).change(function () {
      var fileObj = document.getElementById("file_load").files; // js 獲取文件對象
      if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {

      alert("請選擇文件");
      return;
        }
      if (fileObj.length > 10) { //因本人項目需求、一次最多上傳的文件個數不能超過10個
      alert("一次上傳文件不能超過10個");  
        return;
        }
      var formData = new FormData(); //FormData專門用來給ajax向後臺傳遞文件用的
      formData.append("action", "FileLoad");//向後臺傳遞值、是鍵值對的形式
      for (var i = 1; i <= fileObj.length; i++) {
      formData.append("file", fileObj[i]); //向formData 裏追加文件
      }
      $.ajax({
      url: "../Method/FileUpload.ashx",
      type: "post",
      cache: false,
      data: formData,
      dataType: ‘json‘, //這裏采用json格式向後臺傳遞數據、如果後臺需要返回信息也必須返回json數據 只有這樣ajax的回調函數才能接收到後臺傳過來的值
      cache: false,//上傳文件無需緩存
      processData: false,//用於對data參數進行序列化處理 這裏必須false
      contentType: false,
      success: function (data) {
      if (data == ‘OK‘) {

      //上傳完成
      };
    }
   }
});
});

  3.一般處理程序(上傳)

    public void FileLoad(HttpContext context)

    {
      string path = "";//文件保存路徑
      for (int i = 0; i < context.Request.Files.Count; i++)
      {
        HttpPostedFile file = context.Request.Files[i];
        path = context.Server.MapPath("~/File/" + file.FileName);
        file.SaveAs(path);
      }
    //返回json數據
    JavaScriptSerializer js = new JavaScriptSerializer();
    context.Response.Write(js.Serialize("OK"));
    }

    

    

  4.文件下載前端

  我這裏不方便使用項目中的代碼,所以就簡單寫個Demo

   <a href="../Method/FileDowload.ashx?action=DowFile&filename=1.txt">下載</a> 直接使用a標簽訪問一般處理程序,帶兩個參數 分別為需要請求的方法和需要下載的文件名稱

action=DowFile、filename=1.txt

  

  

 4.一般處理程序(下載)

  public void DowFile(HttpContext context)
  {
    string filename = context.Request["filename"].ToString(); //文件名稱就是前端傳來的filename這個參數
    string path = "~/File/" + filename;
    System.IO.FileInfo file = new System.IO.FileInfo(System.Web.HttpContext.Current.Server.MapPath(path));
    context.Response.Clear();
    context.Response.Charset = "UTF-8";
    context.Response.ContentEncoding = System.Text.Encoding.UTF8;
    context.Response.AddHeader("Content-Type", "application/octet-stream");
// 添加頭信息,為"文件下載/另存為"對話框指定默認文件名,設定編碼為UTF8,防止中文文件名出現亂碼
context.Response.AddHeader("Content-Disposition", "attachment; filename=" + System.Web.HttpUtility.UrlEncode(file.Name, System.Text.Encoding.UTF8));
// 添加頭信息,指定文件大小,讓瀏覽器能夠顯示下載進度
context.Response.AddHeader("Content-Length", file.Length.ToString());
//// 指定返回的是一個不能被客戶端讀取的流,必須被下載
context.Response.ContentType = "application/ms-excel";
// 把文件流發送到客戶端
context.Response.WriteFile(path);
// 停止頁面的執行
context.Response.End();
}

我這個是在項目的跟目錄裏創建了一個文件夾File。<input type="file" multiple="multiple" id="file_load" />標簽的默認樣式改法有很多 百度上有

使用Ajax和一般處理程序實現文件上傳與下載