【问题标题】:Upload file using jQuery and post it to Controller使用 jQuery 上传文件并将其发布到 Controller
【发布时间】:2015-06-26 10:54:39
【问题描述】:

我想知道是否可以通过将文件发布到 ASP.NET MVC 中的控制器操作来上传文件。此上传表单的对话框将动态生成,在我的例子中将位于一个 jQuery 对话框中。

我知道文件输入元素,但我不确定如何将文件发送到控制器操作,不确定如何设置 action 参数

【问题讨论】:

标签: jquery asp.net asp.net-mvc file jquery-dialog


【解决方案1】:

你的动作应该是这样的:

[HttpPost]
public ActionResult Upload(HttpPostedFileBase file) {

  if (file.ContentLength > 0) {
    var fileName = Path.GetFileName(file.FileName);
    var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
    file.SaveAs(path);
  }

  return RedirectToAction("Index");
}

取自:http://haacked.com/archive/2010/07/16/uploading-files-with-aspnetmvc.aspx/

然后使用jQuery Dialog进行文件上传:

$dialog.dialog("option", "buttons", {
    "Save": function () {
        var dlg = $(this);
        var formData = new FormData($("#" + formName)[0]);
        $.ajax({
            url: /Controller/upload,
            type: 'POST',
            data: formData,
            processData: false, 
            contentType: false,
            success: function (response, textStatus, xhr) {
            ...
                }
            },
            error: function (xhr, status, error) {
                ....
            }
        });
    },
    "Cancel": function () {
        $(this).dialog("close");
        $(this).empty();
    }

});

【讨论】:

    【解决方案2】:
    <form id="frmFile" method="post" enctype="multipart/form-data" action="<%=Url.Content("~/WriteSomeServerAction/")%>" >
    
    </form>
    

    //把这个表单放到modal中

    Make Submit 事件会将文件发送到 Action。您可以在 Model 元素中访问文件,如 UploadedFileData

    if (_File.UploadedFileData != null && _File.UploadedFileData.ContentLength > 0)
                    {
                        byte[] buffer = new byte[_File.UploadedFileData.ContentLength];
                        _File.UploadedFileData.InputStream.Read(buffer, 0, buffer.Length);
                        _File.FileData = System.Text.Encoding.Default.GetString(buffer);
                        _File.UploadedFileData = null;
                    }
    

    【讨论】:

    • 实际上并没有尝试过,但我发现另一个答案更完整
    猜你喜欢
    • 1970-01-01
    • 2018-05-12
    • 2021-10-15
    • 2018-10-05
    • 1970-01-01
    • 2015-08-22
    • 2011-05-03
    • 2014-04-10
    • 1970-01-01
    相关资源
    最近更新 更多