Ajax 样式上传相当于 XmlHttpRequest 以将文件上传到 MVC 控制器？通过 ajax 上传到 MVC 控制器已解决

Question

现在，我想删除一个页面上的多个表单。所以目前我正在这样做。

JAVASCRIPT

  $("button[id$='uploadfile']").click(function (evt) {
        //////////////////////////////////////////////////////
        // This code block works
        alert("upload file");
        var file1 = $('#csvIdentifierFileBase').val();
        var formData = new FormData();
        var opmlFile = $('#csvIdentifierFileBase')[0];
        formData.append("opmlFile", opmlFile.files[0]);
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'alt/Import');
        xhr.send(formData);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                alert(xhr.responseText);
            }
        };
        //////////////////////////////////////////////////////

        //////////////////////////////////////////////////////
        // This code block does not
        $.ajax({
            type: 'POST',
            url: 'alt/Import',
            data: formData,
            enctype: 'multipart/form-data',
            //cache: false,
            //contentType: false,
            //processData: false,
            success: function (result) {
                alert(result.success);
            },
            error: function (a, b, c) {
                alert("An error has occurred.");
            }
        });

HTML

        <div class="col-md-12">
            <input type="file" name="csvIdentifierFileBase" id="csvIdentifierFileBase"/>
            <button id="uploadfile" name="action" value="Import" >Import</button>
        </div>

控制器

    [System.Web.Http.HttpPost]
    public ActionResult Import()//HttpPostedFileBase csvIdentifierFileBase)
    {
        HttpResponseMessage result = null;
        HttpPostedFileBase file = Request.Files[0]; //Uploaded file
    }

除了对这个控制器方法的 javscript 调用之外没有改变任何东西，并且使用 XmlHttpRequest 它工作正常，有没有办法切换到 jquery/ajax 样式调用，所以我不依赖 XmlHttpRequest 对象并且仍然拥有它调用控制器？我正在寻找本机解决方案，而不是另一种类型的插件......这可能吗？ 也无法将输入和按钮包装在 AJAX.BeginForm 标记中，因为我试图消除一页上的表单数量。

Answer 1

希望这会帮助其他人，因为我花了很多时间在这上面。以下是如何通过 $.ajax 发布文件，无需任何额外的插件，也无需在 html 视图中添加 Ajax.BeginForm 标记。

JAVASCRIPT

    $("button[id$='uploadfile']").click(function (evt) {
    alert("upload file");
    // relatively irrelevant name used here but is not what model binder uses in MVC
    var file_data = $("#csvIdentifierFileBase").prop("files")[0];   // Getting the properties of file from file field
    var form_data = new FormData();                  // Creating object of FormData class
    // THIS IS IMPORTANT, THE NAME HERE **"file"** IS WHAT THE MODEL BINDER USES IN MVC CONTROLLER
    form_data.append("file", file_data);            // Appending parameter named file with properties of file_field to form_data
    //form_data.append("user_id", 123);             // Adding extra parameters to form_data
    $.ajax({
        url: "alt/Import",
        dataType: 'script',
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                            // Setting the data attribute of ajax with file_data
        type: 'post'
    });
});

HTML 没有表单标签没有插件

         // name and id of input type file relatively irrelevant 
        <div class="col-md-12">
            <input type="file" name="csvIdentifierFileBase" id="csvIdentifierFileBase"/>
            <button id="uploadfile" name="action" value="Import" >Import</button>
        </div>

控制器

    [System.Web.Http.HttpPost]
    public ActionResult Import(HttpPostedFileBase file) // THIS VAIRABLE NAME HAS TO BE THE SAME AS WHAT IS PASSED IN VIA THE SCRIPT FOR FORM DATA
    {
        HttpResponseMessage result = null;
        HttpPostedFileBase file = Request.Files[0]; //Uploaded file JUST A SECOND WAY TO ACCESS THE SAME INFORMATION THAT IS COMING IN AS HttpPostedFileBase file
    }

这里是 GIT IE 不支持 FormData()，因此这种方法不适用于 IE

支持信息可以在这里找到 http://blog.w3villa.com/websites/uploading-filesimage-with-ajax-jquery-without-submitting-a-form/

IE 上面的替代方案

HTML

        <div class="col-md-12">
            <input type="file" name="csvIdentifierFileBase" id="csvIdentifierFileBase"/>
            <button id="uploadfile" name="action" value="Import" >Import</button>
        </div>

JAVASCRIPT

$("button[id$='uploadfile']").click(function (evt) {
    evt.preventDefault();
    var $newForm = $('<form>', {
        'action': 'alt/Import',
        'method': 'post',
        'enctype': 'multipart/form-data',
        'target':'_top'
//dynamically appending the input type file to the dynamically generated form and it MUST be appended to the page to work. "appendTo(body") submit then remove
 }).append($("#csvIdentifierFileBase")).appendTo('body').submit().remove();

});

现在名字很重要

由于输入元素是动态添加到表单中的，因此名称必须与控制器方法参数名称匹配，模型绑定器才能工作。

[System.Web.Http.HttpPost]
public ActionResult Import(HttpPostedFileBase csvIdentifierFileBase)
{

}

基本上没有什么不同，然后在输入周围有一个表单标签，这是我试图避免的情况。我这样做的原因以及我试图避免在一个页面上使用多个表单的原因是因为我处于嵌套表单标签不起作用的情况。