1

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

div“uploadForm”是表单本身。

查询：

  $("#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/（您只需要使用选择文件和上传文件按钮）

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

提前致谢！

4

2 回答 2

2

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

在你拥有的第一块

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 元素。

于 2013-07-20T15:10:27.047 回答
0

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

$('#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

于 2013-07-20T15:03:09.270 回答