使用ASP.NET MVC通过Ajax调用上传文件

Question

我想要在我的页面中上传一个文件，使用以下代码：

<input type="file" name="FileName">

我有一个按钮，点击该按钮会进行ajax提交。

$.ajax({
           cache: false,
           async: true,
           type: "POST",
           url: '@Url.Content("~/OCR/OCRProcessor")',
           data: '',
           success: function (data) {
               $('#ocrresult').val(data);
           }
       });

我希望在控制器动作方法中上传文件，类似于以下方式：

HttpPostedFileBase hpf = Request.Files["FileName"] as HttpPostedFileBase 

请告诉我实现此任务的最佳方法。

- Shankar

Answer 1

在这种情况下，jquery表单插件(GitHub链接)将是一个理想的选择。您可以像这样简单地完成它。(在此表单中包含文件输入)

$('#myFormId').submit(function() { 
    // submit the form 
    $(this).ajaxSubmit(); 
    // return false to prevent normal browser submit and page navigation 
    return false; 
});

演示

这将是一种无插件方法（仅在Html5中），但我仍然建议使用插件。

$("#myFormId").submit(function(){

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

    $.ajax({
        url: "YourPath/ToAction",
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

另一个不错的插件。

- Subin Jacob

---

你能否提供一种不使用jQuery插件的方法来完成这个任务？ - Shankar

我想知道是否可以仅使用 .ajax() 实现。 - Shankar

使用HTML5 FormData对象可以实现此功能。这个jQuery插件也是如此。但是，如果不支持HTML5，则它具有自己的回退机制。 - Subin Jacob

我会尝试这个方法。但是请告诉我是否还有其他实现此目标的方式。 - Shankar

Answer 2

代码在这里展示

        if (window.FormData !== undefined) {

                var fileUpload = $("#FileUpload1").get(0);
                var files = fileUpload.files;


                var fileData = new FormData();
                fileData.append('Type', Type );  //other requered pass data
                fileData.append('name', dataRow.CustomerName);  //other requered pass data
                fileData.append('Id', dataRow.InvoiceId);  //other requered pass data
                fileData.append('subject', Sub);  //other requered pass data
                fileData.append('message', Mess);  //other requered pass data

                for (var i = 0; i < files.length; i++) {
                    fileData.append(files[i].name, files[i]);
                }

                $.ajax({
                    url: '/Email/SendEmail',
                    type: "POST",
                    contentType: false,
                    processData: false,
                    data: fileData,                     
                    success: function (data) {

            if (data == "No") {
                alert("Email Not Exist in Customer Master." );
            }
            if (data == "Not") {
                alert("Email Not Exist in System Setting.");
            }
            if (data == "NotExist") {
                alert("File Not Exist or Some Other Error");
            }
            if (data == "PassNot") {
                alert("Email Password Not Exist in System Setting.");
            } 
            if (data == "NotFile") {
                $('btn-Print').trigger('click');
            }
                    },
                    error: function (err) {
                        alert(err.statusText);
                    }
                });
            } else {
                alert("FormData is not supported.");
            }

- user11501894