使用onclick函数和ajax上传图像文件？答案

【问题标题】：Upload image file using onclick function and ajax?使用onclick函数和ajax上传图像文件？
【发布时间】：2020-08-29 13:46:29
【问题描述】：

我尝试使用 onclick 函数和 ajax 上传图像文件，这可能吗？我搜索如何上传图片，但只有我能看到是通过点击功能。但我有一个原因，这就是我使用 onclick 功能的原因。控制器始终为空值

<div class="col-md-2">
    <div class="form-group">
        @Html.LabelFor(x => x.ImagePath, new { @class = "form-label" })
        <input type="file" name="file" id="files" />
    </div>
</div>

<div class="col-md-2">
    <div class="form-group">
        <button type="submit" id="btnUpload" class="btn btn-primary btn-sm" onclick="saveImage()"><i class="fas fa-save"></i> &nbsp;Submit Image</button>
    </div>
</div>

这是我的 jquery 和 ajax

function saveImage() {
    var formData = new FormData();
    formData.append('file', $('#files')[0].files[0]);

    $.ajax({
        url: '@Url.Action("index", "payable")',
        type: 'POST',
        data: formData,
        traditional: true,
        success: function (data) {
            alert("success");
        }
    });
}

我的控制器

public ActionResult Index() 
{
    HttpPostedFileBase file = Request.Files[0];

    string fileName = Path.GetFileNameWithoutExtension(file.FileName);
    string extension = Path.GetExtension(file.FileName);
    fileName = fileName + extension;
    var ImagePath = "~/Image/" + fileName;
    fileName = Path.Combine(Server.MapPath("~/Image/"), fileName);
    file.SaveAs(fileName);

    return View();
}

【问题讨论】：

您的 Ajax 调用通过 POST 发送文件，而 Index 方法是 GET（默认）。你需要[HttpPost]属性，请不要叫它索引，选择合适的名称。
@derloopkat 尝试添加 [httppost] 但我的文件参数仍然为空。
在您的 ajax 中，将这些设置为 false：contentType: false, processData: false,

标签： c# jquery ajax asp.net-mvc

【解决方案1】：

试试这个代码：

var ufiles = $("#fileInput")[0].files;
if (ufiles.length > 0) {
  if (window.FormData !== undefined) {
    var fileData = new FormData();
    //handling multiple files or single file
    for (var x = 0; x < ufiles.length; x++) {
      fileData.append(ufiles[x].name, ufiles[x]);
    }
    $.ajax({
      type: "POST",
      url: "yourUrl",
      contentType: false,
      processData: false,
      data: fileData,
      success: function (result) {
        //do something with result
      },
    });
  } else {
    alert("This browser doesn't support HTML5 file uploads!"); //bootbox dependency
  }
}

在服务器端：

[HttpPost]
        public JsonResult Index()
        {
            HttpPostedFileBase file = HttpContext.Request.Files[0];//this can be put under foreach for multiple files

            string fileName = Path.GetFileNameWithoutExtension(file.FileName);
            string extension = Path.GetExtension(file.FileName);
            fileName = fileName + extension;
            var ImagePath = "~/Image/" + fileName;
            fileName = Path.Combine(Server.MapPath("~/Image/"), fileName);
            file.SaveAs(fileName);
            //now cause we are hadnling ajax
            return Json(fileName,JsonRequestBehavior.AllowGet);
        }

【讨论】：