使用jQuery動態加載圖像

Question

我有一個場景，我有一個用戶選擇一個圖像上傳到他/她的用戶配置文件在我的網頁上。我爲我的網站使用.net的MVC3架構。我需要的是讓圖像在他選擇他想要的圖像之後顯示在頁面上，但在我將其存儲在數據庫中之前。我四處搜尋，最終嘗試這裏面我的一個朋友說他的工作：

在我試過的觀點：

<div class="floatRight"> 
    <a onclick="opendialogbox('imageLoad2');" style="cursor: pointer">Photo</a> 
    <img src="… " width="16" height="16" id="imgThumbnail2" alt="photo" /> 
    <input type="file" name="imageLoad2" accept="image/*" id="imageLoad2" onchange="ChangeImage('imageLoad2','#imgThumbnail2')" hidden="hidden" /> 
</div> 

<script type="text/javascript"> 
    function opendialogbox(inputid) { 
     document.getElementById(inputid).click(); 
    } 

function ChangeImage(fileId, imageId) { 
     var ext = document.getElementById(fileId).value.match(/\.(.+)$/)[1]; 
     switch (ext.toLowerCase()) { 
      case 'jpg': 
      case 'bmp': 
      case 'png': 
      case 'gif': 
      case 'jpeg': 
       { 
        var myform = document.createElement("form"); 
        myform.style.display = "none"; 
        myform.action = "/ImagePreview/AjaxSubmit"; 
        myform.enctype = "multipart/form-data"; 
        myform.method = "post"; 
        var imageLoad; 
        var imageLoadParent; 
        //test browser used then submit form 
        $(myform).ajaxSubmit({ success: 
         function (responseText) { 
          var d = new Date(); 
          $(imageId)[0].src = "/ImagePreview/ImageLoad?a=" + d.getMilliseconds(); 
          if (document.all || is_chrome)//IE 
           imageLoadParent.appendChild(myform.firstChild); 
          else//FF      
           document.body.removeChild(myform); 
         } 
        }); 
       } 
       break; 
      default: 
       alert('Error, please select an image.'); 
     } 

    } 

</script> 

和Controller我想：

[AcceptVerbs(HttpVerbs.Post)] 
     public ActionResult AjaxSubmit(int? id) 
     { 
      Session["ContentLength"] = Request.Files[0].ContentLength; 
      Session["ContentType"] = Request.Files[0].ContentType; 
      byte[] b = new byte[Request.Files[0].ContentLength]; 
      Request.Files[0].InputStream.Read(b, 0, Request.Files[0].ContentLength); 
      Session["ContentStream"] = b; 
      HttpPostedFileBase file = Request.Files[0]; 
      string myFilePath = Server.MapPath(Url.Content("~/Content/themes/base/images/Auxiliar.png")); 
      file.SaveAs(myFilePath); 
      return Content(Request.Files[0].ContentType + ";" + Request.Files[0].ContentLength); 
     } 



     public ActionResult ImageLoad(int? id) 
     { 
      byte[] b = (byte[])Session["ContentStream"]; 
      int length = (int)Session["ContentLength"]; 
      string type = (string)Session["ContentType"]; 
      Response.Buffer = true; 
      Response.Charset = ""; 
      Response.Cache.SetCacheability(HttpCacheability.NoCache); 
      Response.ContentType = type; 
      Response.BinaryWrite(b); 
      Response.Flush(); 
      Response.End(); 
      Session["ContentLength"] = null; 
      Session["ContentType"] = null; 
      Session["ContentStream"] = null; 
      return Content(""); 
     } 

現在所有這一切我認爲是有道理的，但當我在我的網站嘗試它的方法永遠不會到達服務器（我在控制器中的兩個方法的開始放置一個斷點）。我也用Firefox的螢火蟲跟蹤腳本的頁面上，直到它到達行：

$(myform).ajaxSubmit({ success: 
         function (responseText) { 
          var d = new Date(); 
          $(imageId)[0].src = "/ImagePreview/ImageLoad?a=" + d.getMilliseconds(); 
          if (document.all || is_chrome)//IE 
           imageLoadParent.appendChild(myform.firstChild); 
          else//FF      
           document.body.removeChild(myform); 
         } 
        }); 

在這裏繼續，但從未進入成功的條件。我認爲這可能是與頁面上包含的JQuery版本有關的問題，並注意到我的朋友網站包括：jquery-1.5.1.min.js，jquery-1.3.2.js和jquery_form.js

我添加了這些到我的網站（這是使用jquery-1.7.2.min.js），但問題仍在繼續。不確定是否包含jQuery的各種版本會導致與方法的某種衝突，或者如果問題在其他地方。

我非常感謝在這件事上的任何幫助。 在此先感謝。

Answer 1

Donnie，現在仍然很難推斷出問題出在這裏，但是您可以通過一些事情來確定問題的確切性質。

首先，您正在處理成功條件，但您還需要使用類似於您上面寫的匿名函數來處理錯誤條件。 http://api.jquery.com/jQuery.ajax/有這方面的一些信息，但實際上你會寫：

$(myform).ajaxSubmit({ success: function (responseText) { 
            // your success method 
           }, 
         error: function (responseText) { 
            // your error method 
           } 
       }); 

接下來，Firebug是偉大的，但你也想使用它的網絡監控能力，而不僅僅是腳本調試。有可能會有非常相關的500或404回來，你不知道。

如果是404，它可能與這條線：

myform.action = "/ImagePreview/AjaxSubmit"; 

我通常是新的一個變種，讓MVC建立我的動作URL像這樣：

var actionUrl = '@Url.Action("Action", "Controller")' 

作爲最佳做法我通常會將此URL作爲視圖模型的一部分注入，或者將其存儲在視圖中的隱藏字段中，但這也是可以的。

希望這些提示有助於一些。乾杯。