ASP.NET利用JQuery自動上傳圖片

記得去年的時候，我在做上傳圖片是就遇到了一個問題，當時還在部落格園的博問中提問過（http://q.cnblogs.com/q/28119/），最終我選擇了使用Uploadify解決當時的問題。前幾天在做上傳圖片時，想選擇圖片之後立即上傳，自然而然想到了使用JQuery，但是又遇到了去年遇到的那個問題，這種情況還是需要提交表單才行。前天看到園子的一位朋友寫的ASP.NET工作筆記之一：圖片上傳預覽及無重新整理上傳，今天我也專門寫了一個例子，歡迎批評指正。

DEMO的結構

下面看看UploadImage.aspx頁面裡的代碼：

HTML代碼：

   1:  <form id="form1" runat="server">

   2:     <div id="upload">

   3:         <input type="file" id="uploadImage" name="uploadImage" />

   4:     </div>

   5:     <div id="preview">

   6:         <img id="previewImage" src="images/nopic.jpg" alt="暫無圖片" />

   7:     </div>

   8:  </form>

CSS代碼：

   1:          #upload

   2:          {

   3:              height: 25px;

   4:          }

   5:          #upload input

   6:          {

   7:              float: left;

   8:              margin: 0 20px 0 0;

   9:          }

  10:          #upload img

  11:          {

  12:              width: 25px;

  13:              height: 25px;

  14:              float: left;

  15:          }

  16:          #preview

  17:          {

  18:              width: 300px;

  19:              margin: 10px 0 0 0;

  20:          }

  21:          #preview img

  22:          {

  23:              width: 300px;

  24:              height: 260px;

  25:          }

JS代碼：

首先引用下面的JS檔案：

   1:  <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>

   2:  <script src="js/jquery.form.js" type="text/javascript"></script>

 

   1:     $(function () {

   2:              var wait = $("<img src=\"images/wait.gif\" alt=\"正在上傳\"/>");

   3:              $("#uploadImage").change(function () {

   4:                  $("#form1").ajaxSubmit({

   5:                      url: 'UploadImage.ashx',

   6:                      beforeSubmit: function () {

   7:                          $("#upload").append(wait);

   8:                          $("#upload img").css("display", "inline");

   9:                      },

  10:                      success: function (data) {

  11:                          $("#upload img").fadeOut(2000);

  12:                          if (data != "上傳失敗") {

  13:                              $("#previewImage").attr("src", "uploadimages/" + data).hide().fadeIn(2000);

  14:                          }

  15:                          else {

  16:                              alert("上傳失敗");

  17:                          }

  18:                      }

  19:                  });

  20:              });

  21:          });

UploadImage.ashx檔案的代碼如下：

   1:  public void ProcessRequest(HttpContext context)

   2:  {

   3:      context.Response.ContentType = "text/plain";

   4:      HttpPostedFile file = context.Request.Files[0];

   5:      if (file != null)

   6:      {

   7:          try

   8:          {

   9:              //圖片儲存的檔案夾路徑

  10:              string path = context.Server.MapPath("~/uploadimages/");

  11:              //每天上傳的圖片一個檔案夾

  12:              string folder = DateTime.Now.ToString("yyyyMMdd");

  13:              //如果檔案夾不存在，則建立

  14:              if (!Directory.Exists(path + folder))

  15:              {

  16:                  Directory.CreateDirectory(path + folder);

  17:              }

  18:              //上傳圖片的副檔名

  19:              string type = file.FileName.Substring(file.FileName.LastIndexOf('.'));

  20:              //儲存圖片的檔案名稱

  21:              string saveName = Guid.NewGuid().ToString() + type;

  22:              //儲存圖片

  23:              file.SaveAs(path + folder + "/" + saveName);

  24:              context.Response.Write(folder + "/" + saveName);

  25:          }

  26:          catch

  27:          {

  28:              context.Response.Write("上傳失敗");

  29:          }

  30:      }

  31:  }

最後程式啟動並執行效果如所示：

未上傳圖片

上傳後

以上代碼我在Google和FF中測試沒有問題，在IE9下會出現下面的問題：

查看問題出現在哪，啟動IE9的開發人員工具進行調試，通過調試可以發現IE9在返回的data前後分別加了<pre>和</pre>

這樣的話，就需要修改一下JS代碼，如果是IE9的話，就將<pre></pre>替換掉。

   1:  success: function (data) {

   2:      $("#upload img").fadeOut(2000);

   3:      if (data != "上傳失敗") {

   4:          if ($.browser.msie) {

   5:              data = data.replace("<pre>", "").replace("</pre>", "");

   6:          }

   7:          $("#previewImage").attr("src", "uploadimages/" + data).hide().fadeIn(2000);

   8:      }

   9:      else {

  10:          alert("上傳失敗");

  11:      }

  12:  }

上面的代碼只在IE9下測試，其他版本的，感興趣的朋友可以自己測試。

線上測試地址：http://www.tnmblogs.com/Demo/UploadImage.aspx