javascript - 通过文件上传添加新数据

Question

我有这个表单，它有两个字段，一个名称和一个图像字段。下面是表单的代码

@using (Html.BeginForm("AddNewRecipe", "Kitchen", FormMethod.Post, new { enctype = "multipart/form-data", id = "addNewRecipe", data_partitionId = Model.Id }))
{
  <input type="text" placeholder="Recipe Name" name="newRecipeName" id="newRecipeName" value="" />
  <input type="file" accept="image/*" name="newRecipeImage" id="newRecipeImage" value="" />
  <button type="submit" class="button small" id="submitnewRecipe">Add</button>
}

提交表单后，我会在 JavaScript 中执行此操作，

$('form#addNewRecipe').submit(function (event) {
    event.preventDefault();
    var data = new FormData();
    var files = $('#newRecipeImage').get(0).files;
    if (files.length > 0) {
        data.append("UploadedImage", files[0]);
    }
    console.log(data); // no data is appended
});

我在这里尝试做的是将图像文件和名称发送到服务器，以便可以上传它们。关于如何做到这一点有什么见解吗？

我正在 asp.net mvc c# 中寻找一个不错的解决方案。

也许我的技术不太好。我愿意接受批评。 :)

Answer 1

我在我的项目中使用它(工作代码)

jquery

var formData = new FormData();
var files = $('#newRecipeImage').get(0).files;
if (files.length > 0) {
    formData.append("img", files[0]);//files[0].name contains the file name
}
$.ajax({
   cache: false,
   type: 'POST',
   data: formData,
   processData: false,
   contentType: false,
   url: '/Sport/GetImagePreview',
   success: function(data) {
           //$("#yourImage").attr("src", "data:image/png;base64," + data.base64imgage);         
   },
   error: function (XMLHttpRequest, textStatus, errorThrown) {

   }
});

然后在 Controller 中

 [HttpPost]
 public JsonResult GetImagePreview()
 {
     try
     {
     if (System.Web.HttpContext.Current.Request.Files.AllKeys.Any())
     {
         var img = System.Web.HttpContext.Current.Request.Files["img"];//Request.FILES['img'].name contains the file name
         var ms = new MemoryStream();
         var logo = Image.FromStream(img.InputStream);
         logo = FixedSize(logo, 150, 150);
         logo.Save(ms, System.Drawing.Imaging.ImageFormat.Png);

         return Json(new {base64imgage = Convert.ToBase64String(ms.ToArray())});
     }
     return Json("ko");
   }
   catch (Exception)
   {
      return Json("ko");
   }
 }