Question

我正在尝试使用ajax，jquery和formdata上传文件而不进行刷新。不幸的是，当我试图在我的控制器中读取文件时，它说文件是空的，我不知道为什么。

div“uploadForm”就是表单本身。

JQuery的：

  $("#submitImage").click(function (event) {
    event.preventDefault();
    $('#uploadImage #submitImage').val('Uploading File..');

    var formData = new FormData($('#uploadForm'));

    $.ajax({
        url: "Upload",
        data: formData,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function (data) {
            alert(data);
        }
    });


});

HTML：

 @using (Html.BeginForm("Index", "Upload", FormMethod.Post, new { enctype = "multipart/form-data", @id="uploadForm"}))
        {
    <input type="submit" value="Upload Image" id="submitImage"/>
    <input type="file" name="file" id="bannerImage" value="Choose file" />
    }

控制器：

  [AcceptVerbs(HttpVerbs.Post)]
   [HttpPost]
    public ActionResult Index(HttpPostedFileBase file)
    {
        Functions Functions = new Functions();
        string Filename = Functions.GenerateUniqueFileName();

        if (file == null)
        {
            ViewBag.Test = "Ajax call complete, but the file is empty";
        }
        else
        {
            ViewBag.Test = "Ajax call complete, and the file isn't empty!";
        }
        return View();
    }

}

现场演示：http://upload.jamieknoef.nl/（您只需要使用选择文件和上传文件按钮）

编辑：已修复，请参阅我的其他帖子以获取答案！

提前致谢！

Answer 1

如果您想知道为什么它适用于您发布的第二块代码，这就是原因：

在你的第一块上

var formData = new FormData($('#uploadForm'));

将jQuery包装对象传递给FormData构造函数的位置。这不起作用，因为构造函数需要HTMLFormElement（请参阅https://developer.mozilla.org/en-US/docs/Web/API/FormData?redirectlocale=en-US&redirectslug=Web%2FAPI%2FXMLHttpRequest%2FFormData）。

在第二块中你有：

var form = $(this);    
formdata = new FormData(form[0]);

其中按预期工作，因为form [0]是表示表单的实际DOM元素。

Answer 2

我不知道问题是什么，但我发现这段代码确实有效：

$('#myform').on('sumbit', function(){
var form = $(this);
var formdata = false;
if (window.FormData){
    formdata = new FormData(form[0]);
}

var formAction = form.attr('action');
$.ajax({
    url         : '/upload',
    data        : formdata ? formdata : form.serialize(),
    cache       : false,
    contentType : false,
    processData : false,
    type        : 'POST',
    success     : function(data, textStatus, jqXHR){
        // Callback code
    }
});

}）;

来源：https://coderwall.com/p/p-n7eq

上传的文件在控制器中为空

2 个答案: