如何在ASP.NET MVC中执行图像的Ajax / JQuery上载？

我有一个用ASP.NET MVC编写的站点。 我有一个页面，用户可以在其中创建一篇小文章。 在本文中，他们可以选择一个图像。 我有一个页面，他们可以上传他们的图像，在创建文章页面上，只需列出它们。 但是很多人抱怨他们在发现他们没有上传他们需要的图像之前写了整篇文章。 我想要的是让用户能够从创建文章页面上传图像，然后重新加载我可能的图像下拉列表进行选择。

我想在页面上制作一个单独的多部分表单，并让用户在那里选择一个文件（基本上使用我现有的上传function）。 但是我如何提交异步？ 如何重新渲染我的图像列表异步？

如何使用jquery / ajax上传此图像，然后重新填充我的下拉列表？

/干杯

Answer 1

我已经使用过这个jQuery了几次。
我将上传按钮放在使用PopupImageUploader元素的jQuery UI模式对话框中。

我的javascript在元素upladerFile上构建上传器

 function CreateImageUploader() { var uploader = new qq.FileUploader({ element: $('#uploaderFile')[0], template: '
' + '
Drop files here to upload
' + '
Seleziona il Listino Excel
' + '
' + '
', 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事件检查上传结果，并最终更新您的下拉列表。 您的UploadImage操作可以接收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 Form插件。 您可以在此处找到代码和示例：

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

希望这可以帮助。

Answer 3

    $("#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]; } }