在 mvc 上使用 ajax 发送文件和文本参数

Posted

技术标签:

【中文标题】在 mvc 上使用 ajax 发送文件和文本参数【英文标题】:send file and text parameters using ajax on mvc 【发布时间】:2018-09-20 02:14:18 【问题描述】:

检查下面的 jquery 代码。在这里,我从 html 中获取文件,然后通过 ajax 调用将其发布到我的 Controller Post 方法。如您所见,从 Controller post 方法中,我成功地在名为 files 的变量中接收了该文件。但我的问题是如何从这个 ajax 调用中发送另外两个名为 - typeid 的文本参数,那么我如何使用该文件从控制器获取该值?基本上我也必须用那些文本值来获取那个文件。这怎么可能? ajax 和控制器需要什么改变?

HTML:

<div class="col-sm-3" style="float:left;">
                        <label class="btn btn-outline-dark btn-block">
                            Browse...
                            <span id="uploaded-file-name" style="font-style: italic"></span>
                            <input id="file-upload" type="file" name="file"
                                   onchange="$('#uploaded-file-name').text($('#file-upload')[0].value);" hidden>
                        </label>
                    </div>
                    <div class="col-sm-2" style="float:left;">
                        <button class="btn btn-dark" id="start_upload">Start Upload</button>
                    </div>

jQuery ajax:

//file upload
        $("#start_upload").click(function (evt) 
            var fileUpload = $("#file-upload").get(0);
            var files = fileUpload.files;
            var data = new FormData();
            for (var i = 0; i < files.length; i++) 
                data.append(files[i].name, files[i]);
            
            $.ajax(
                type: "POST",
                url: "/Products/UploadFiles",
                contentType: false,
                processData: false,
                data: data,
                success: function (message) 
                    alert(message);
                ,
                error: function () 
                    alert("There was error uploading files!");
                
            );
        );

MVC .net 核心控制器:

[HttpPost]
public IActionResult UploadFiles()

    //file upload process
    var files = Request.Form.Files;

    string type = "";
    int id = ;



【问题讨论】:

【参考方案1】:

您可以将其他输入字段值添加到 FormData 对象。

我将首先创建一个用于接受 ajax 有效负载的视图模型

public class UploadVm

    public string Type  set; get; 
    public string Id  set; get; 
    public HttpPostedFileBase File  set; get; 

现在在您的视图中,再添加 2 个输入元素以从用户那里读取此值

<input id="id"   type="text" />
<input id="type" type="text" />

现在在您的 ajax 调用代码中,向 FormData 对象添加另外 2 个项目。

$("#start_upload").click(function (evt) 

    var fileUpload = $("#file-upload").get(0);
    var files = fileUpload.files;
    var data = new FormData();

    for (var i = 0; i < files.length; i++) 
        data.append("File", files[i]);
    

    //Add the input element values
    data.append("Type", $("#type").val());
    data.append("Id", $("#id").val());

    $.ajax(
        type: "POST",
        url: "/Products/UploadFiles",
        contentType: false,
        processData: false,
        data: data,
        success: function (message) 
            console.log(message);
        ,
        error: function () 
            alert("There was error uploading files!");
        
    );

);

现在在您的服务器端,您可以使用我们的新视图模型作为操作方法的参数。当进行 ajax 调用时,模型绑定器将能够映射从请求中接收到的数据,并将其映射到我们的 UploadVm 视图模型对象的属性。

[HttpPost]
public ActionResult UploadFiles(UploadVm model)

    // to do : read values of model and use it
    // to do : return something

【讨论】:

你这个更聪明的答案。【参考方案2】:

我在这里所做的是,只需将带有值的键插入到来自 jquery 的 FormData() obj 中,然后您就可以从控制器中获取它。如果您想了解更多关于FormData() 的信息,那么read here

把你的jquery改成这个-

//file upload
        $("#start_upload").click(function (evt) 
            var fileUpload = $("#file-upload").get(0);
            var files = fileUpload.files;
            var data = new FormData();
            data.append('type', 'your_type');
            data.append('id', '1');

            for (var i = 0; i < files.length; i++) 
                data.append(files[i].name, files[i]);
            
            $.ajax(
                type: "POST",
                url: "/Products/UploadFiles",
                contentType: false,
                processData: false,
                data: data,
                success: function (message) 
                    alert(message);
                ,
                error: function () 
                    alert("There was error uploading files!");
                
            );
        );

然后通过它的键从控制器中获取这些值:

[HttpPost]
public IActionResult UploadFiles()

    //file upload process
    var files = Request.Form.Files;
    string type = Request.Form.Where(x => x.Key == "type").FirstOrDefault().Value;
    string id = Request.Form.Where(x => x.Key == "id").FirstOrDefault().Value;


【讨论】:

以上是关于在 mvc 上使用 ajax 发送文件和文本参数的主要内容,如果未能解决你的问题,请参考以下文章

AJAX 发布到 ASP.NET MVC 6 控制器操作方法和参数为空

图书管理的图书增删改查choices参数MTV与MVC模型多对多关系的三种创建方式Ajax操作前后端传输数据编码格式ajax发送json格式数据ajax发送文件django自带的序列化

图书管理的图书增删改查choices参数MTV与MVC模型多对多关系的三种创建方式Ajax操作前后端传输数据编码格式ajax发送json格式数据ajax发送文件django自带的序列化

使用 MVC 4 和 Ajax 上传文件

在 Spring MVC 中以 AJAX 响应发送文件

django之ORM的查询优化,Ajax