如何在ASP.NET MVC中執行圖像的Ajax/JQuery上載？

Question

我有一個用ASP.NET MVC編寫的網站。我有一個頁面，用戶可以創建一個小文章。對於這篇文章他們可以選擇一張圖片。我有一個頁面，他們可以上傳他們的圖像，並在創建文章頁面，只需列出它們。但是很多人都抱怨說，他們在意識到他們沒有上傳他們需要的圖片之前已經撰寫了整篇文章。我想要的是用戶能夠從創建文章頁面上傳圖像，然後重新加載可能的圖像的下拉列表以供選擇。

我想在頁面上創建一個單獨的多部分表單，並讓用戶在那裏選擇一個文件（基本上使用我現有的上傳功能）。但我如何去提交異步？以及如何重新渲染我的圖像列表異步？

如何使用jquery/ajax上傳此圖片，然後重新填充我的下拉列表？

/歡呼

Answer 1

我幾次使用這個jQuery pluging。
我把我的上傳按鈕放入jQuery UI modal dialog，它使用PopupImageUploader元素。

<div id="PopupImageUploader" title="Upload Image"> 
    <div id="uploaderFile"></div> 
</div> 

和我的JavaScript構建的元素上傳upladerFile

function CreateImageUploader() { 
    var uploader = new qq.FileUploader({ 
     element: $('#uploaderFile')[0], 
     template: '<div class="qq-uploader">' + 
           '<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' + 
           '<div class="qq-upload-button ui-button ui-widget ui-corner-all ui-button-text-only ui-state-default">Seleziona il Listino Excel</div>' + 
           '<ul class="qq-upload-list"></ul>' + 
           '</div>', 
     hoverClass: 'ui-state-hover', 
     focusClass: 'ui-state-focus', 
     action: 'Home/UploadImage', 
     allowedExtensions: ['jpg', 'gif'], 
     params: { }, 
     onSubmit: function(file, ext) { 

      }, 
     onComplete: function(id, fileName, responseJSON) { 
      $("#PopupImageUploader").dialog('close'); 
      } 
     } 
    }); 
} 

可以使用的onComplete事件查看上傳的結果，最終，更新下拉。 您的上傳圖像動作可以接收params: { }屬性中指定的額外參數。 這是我的控制器：

[HttpPost()] 
    public System.String UploadImage(string id) 
    { 

     bool IsIE = false; 
     string sFileName = ""; 
     var TempFolder = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "_TEMP"); 

     if ((Request.Files == null) || (Request.Files.Count == 0)) 
     { 
      if (string.IsNullOrEmpty(Request.Params["qqfile"])) 
      { 
       return ("{success:false, error:'request file is empty'}"); 
      } 
      else 
      { 
       sFileName = Request.Params["qqfile"].ToString(); 
      } 
     } 
     else 
     { 
      sFileName = Request.Files[0].FileName; 
      IsIE = true; 
     } 

     if (string.IsNullOrEmpty(sFileName)) 
     { 
      return ("{success:false, error:'request file is empty'}"); 
     } 

     string DocumentName = id + Path.GetExtension(sFileName); 

     if (IsIE) 
     { 
      try 
      { 
       Request.Files[0].SaveAs(Path.Combine(TempFolder, DocumentName)); 
      } 
      catch (Exception ex) 
      { 
       return ("{success:false, error:'" + ex.Message + "'}"); 
      } 
     } 
     else 
     { 
      try 
      { 
       if ((Request.InputStream != null) && (Request.InputStream.CanRead) && (Request.InputStream.Length > 0)) 
       { 
        using (FileStream fileStream = new FileStream(Path.Combine(TempFolder, DocumentName), FileMode.Create)) 
        { 
         byte[] FileBytes = new byte[Convert.ToInt32(Request.InputStream.Length) + 1]; 
         Int32 bytesRead = 0; 
         bytesRead = Request.InputStream.Read(FileBytes, 0, FileBytes.Length); 
         fileStream.Write(FileBytes, 0, bytesRead); 
         fileStream.Flush(); 
         fileStream.Close(); 
        } 
       } 
      } 
      catch (Exception ex) 
      { 
       return ("{success:false, error:'" + ex.Message + "'}"); 
      } 
     } 

     var newFileName = "new assigned filename"; 

     return ("{success:true, newfilename: '" + newFileName + "'}"); 

    } 

IE瀏覽器有不同的行爲，所以我有兩個不同的程序來讀取文件。

Answer 2

您可以使用JQuery表格插件。你可以找到的代碼和例子在這裏：

http://jquery.malsup.com/form/#file-upload

希望這有助於。

Answer 3

<input type="file" id="picfile" name="picf" /> 
     <input type="text" id="txtName" style="width: 144px;" /> 
$("#btncatsave").click(function() { 
var Name = $("#txtName").val(); 
var formData = new FormData(); 
var totalFiles = document.getElementById("picfile").files.length; 

        var file = document.getElementById("picfile").files[0]; 
        formData.append("FileUpload", file); 
        formData.append("Name", Name); 

$.ajax({ 
        type: "POST", 
        url: '/Category_Subcategory/Save_Category', 
        data: formData, 
        dataType: 'json', 
        contentType: false, 
        processData: false, 
        success: function (msg) { 

           alert(msg); 

        }, 
        error: function (error) { 
         alert("errror"); 
        } 
       }); 

}); 

[HttpPost] 
    public ActionResult Save_Category() 
    { 
     string Name=Request.Form[1]; 
     if (Request.Files.Count > 0) 
     { 
      HttpPostedFileBase file = Request.Files[0]; 
     } 


    }