title: Loading images dynamically using JQuery
body: <p>I have a scenario where I have a user select an image to upload to his/her user profile on my webpage. I'm using .net's MVC3 architecture for my website. What i need is for the image to show on the page after he chooses the one he wants but before i store it in the database. I searched around and ended up trying this which a friend of mine said worked for him:</p>
  
  <p>In the view I tried:</p>
  
  <pre><code>&lt;div class="floatRight"&gt;
      &lt;a onclick="opendialogbox('imageLoad2');" style="cursor: pointer"&gt;Photo&lt;/a&gt;
      &lt;img src="… " width="16" height="16" id="imgThumbnail2" alt="photo" /&gt;
      &lt;input type="file" name="imageLoad2" accept="image/*" id="imageLoad2" onchange="ChangeImage('imageLoad2','#imgThumbnail2')" hidden="hidden" /&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      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.');
          }
  
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>And in the controller i tried:</p>
  
  <pre><code>[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("");
          }
  </code></pre>
  
  <p>now all this i thought made sense but when i try it in my website the method never reaches the server (I placed a break-point at the beginning of both methods in the controller). I also used firefox's firebug to trace the script on the page until it reaches the line:</p>
  
  <pre><code>$(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);
                          }
                      });
  </code></pre>
  
  <p>here it continues but never enters the success condition. I thought it might be a problem with the JQuery versions included on the page and noticed that my friends site included: jquery-1.5.1.min.js, jquery-1.3.2.js and jquery_form.js</p>
  
  <p>I added these to my website (which was using jquery-1.7.2.min.js) but the problem continued. Not sure if including various versions of jquery would cause some kind of conflict with the methods or if the problem is somewhere else.</p>
  
  <p>I would greatly appreciate any help on the matter.
  Thanks in advance.</p>