Question

我尝试将文件从ajax异步上传到我的控制器时出现问题。我有3个变量传递（PictureId，PictureName和PictureFile）。问题出在我的＆＃34; PictureFile＆＃34;应该保存上传文件的变量，而是它总是将null 值传递给控制器。

这是我的观点模型

public class PictureUpload
{
    public int PictureId { get; set; }
    public string PictureName { get; set; }
    public HttpPostedFileBase PictureFile { get; set; }
}

这是我的控制器

public JsonResult EditPicture(PictureUpload picture)
{
    //do something here
}

这是我的表单

<div class="thumbnail" id="uploadForm">
    <form name="uploadForm" enctype="multipart/form-data">
        <input type="text" name="fileId" hidden="hidden" />
        <input type="file" name="file" style="max-width: 100%" />
        <input type="button" name="cancel" value="cancel" />
        <span>
            <input type="button" name="upload" value="upload" />
        </span>
    </form>
</div>

这是我的剧本

$("input[name=upload]").click(function () {
    var $pictureId = $("input[name=fileId]").val();
    var $pictureFile = $("input[name=file]").get(0).files[0];

    $.ajax({
        type: 'POST',
        url: '@Url.Action("EditPicture", "Restaurant")',
        contentType: "application/json",
        dataType: 'json',
        data: JSON.stringify({ PictureId: $pictureId, PictureName: $pictureFile.name, PictureFile: $pictureFile }),
    });

在我的控制器参数中。 ＆＃34; PictureId＆＃34; 和＆＃34; PictureName＆＃34; 保存正确的值，但＆＃34; PictureFile＆＃34; 始终为null。因此，当系统将参数从ajax传递给控制器时，这意味着某些事情不正确。不知何故，系统会将＆＃34; file＆＃34; 类型与其他文件区别对待。你可以帮我一下，这样文件就能成功传递给控制器并告诉我这种方法有什么问题吗？

Answer 1

正如评论中正确提到的那样使用FormData。以下是代码段：

var fd = new FormData();
fd.append('file', fileObject);
fd.append('PictureId', pictureId);
fd.append('PictureName', pictureName);

    $.ajax({
        url: '/Restaurant/EditPicture',
        async: true,
        type: 'POST',
        data: fd,
        processData: false,
        contentType: false,
        success: function (response) {                  
        }
    });

Answer 2

您无法使用AJAX上传文件。实现此目的的一种方法是使用隐藏的iframe，它将模拟AJAX调用并执行实际的文件上载或使用Flash。

MVC 4 Ajax异步文件上传始终将空值传递给控制器

2 个答案: