使用ajax上传文件,将它们像参数一样传递给控制器

我有一个非常独特的问题,我有一个引用模型列表的模型,并且我需要将一个整数列表传递给控制器​​,因此为了解决这个问题,我使用了带有传统参数的ajax调用:true参数和输入get,这样我就可以获得ID列表并将其发送到控制器。但是现在我遇到了另一个问题,因为我需要上传2个文件,一个视频和一个缩略图。我尝试了多种方法来实现此目的,但没有任何结果对我来说,httppostedfileBase始终为null。

我尝试通过input type =“ file”标签旁边的“上传按钮”调用另一个ajax,但是没有结果。

这是HTML代码

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-title">
                <h4>Add new project</h4>
            </div>
            <div class="card-body">
                <div class="basic-form">


                    <form id="addNewProject">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <input type="text" class="form-control input-flat" placeholder="Project name" name="projectname" id="projectname" />

                                </div>
                                <div class="form-group">
                                    <textarea class="form-control input-flat",placeholder="Project description..." id="projectDesc"></textarea>

                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    @Html.DropDownListFor(m => m.clients_client_id,new SelectList(clients,"client_id","client_name"),new { @class = "form-control input-flat",@placeholder = "Project name",@id="clientID" })
                                </div>
                                <div class="form-group">
                                    @Html.DropDownListFor(m => m.project_type,new SelectList(types),@id="type"})
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                                <div id="uploadThumb">

                                    <p>Upload Thumbnail for the project</p>
                                    @Html.TextBoxFor(m => m.thumb_url,new { @type = "file",@id = "thumb" })
                                    <input type="button" id="thumUploadBtn" value="Upload" class="btn btn-primary btn-rounded m-b-10 m-l-5">

                                </div>
                                <br />
                                <div>
                                    <p>Upload video for the project</p>
                                    @Html.TextBoxFor(m => m.video_url,@id = "video" })
                                </div>
                            </div>

                            <div class="col-lg-6">

                                <p>Add skills for this project</p>

                                <div class="container" style="width:100%;">
                                    <div class="list-group" id="skillList" style="overflow-y: scroll;height:250px">
                                        @for (int i = 0; i < skills.Count; ++i)
                                        {

                                            @*@Html.TextBoxFor(m=> m.Project_Has_Skills,new {@type="checkbox",@value=""+skills.ElementAt(i).skill_name })*@
                                            <input type="checkbox" name="@skills.ElementAt(i).id_skill" value="@skills.ElementAt(i).skill_name" id="@skills.ElementAt(i).id_skill" class="chck" />
                                            <label class="list-group-item" for="@skills.ElementAt(i).id_skill">@skills.ElementAt(i).skill_name</label>

                                        }
                                    </div>

                                </div>

                            </div>

                        </div>

                        <input type="submit" value="Add project" id="btnAdd" class="btn btn-success btn-flat m-b-10 m-l-5" />

                    </form>


                </div>
            </div>
        </div>
    </div>

</div>

<div class="row">

这是具有ajax调用的脚本

<script>
    $(document).ready(function () {

        var srs;
        var url = "/Administration/AddProject"
        $('input[type="checkbox"]').bind('change',function () {
            srs = []
            $('input[type="checkbox"]').each(function (index,value) {
                if (this.checked) {
                    /*add*/ /*get label text associated with checkbox*/

                    srs.push($(this).attr("id"));


                }
            });

        });

        $("#addNewProject").on("submit",function (e) {
            e.preventDefault();

            var name = $("#projectname").val();
            var desc = $("#projectDesc").val();
            var type = $("#type option:selected").text();
            var client = $("#clientID").val();
            var thumbURL = $("#thumb").val().split('\\').pop();
            var videoURL = $("#video").val().split('\\').pop();

            var fData = new FormData();
            fData.append("thumbfile",$("#thumb")[0].files[0]);
            alert(fData.text);


            $.ajax({
                type: 'GET',dataType: 'json',url: '@Url.action("AddProject","Administration")',data: {
                    skillIDS: srs,projectname: name,description: desc,clientID: client,projectType: type,thumbUrl: thumbURL,videoUrl: videoURL,thumbfile: fData

                },traditional: true,success: function (data) {

                },error: function (data) {

                }
            });

        });
</script>

和控制器

public JsonResult AddProject(List<int> skillIDS,string projectname,string description,int clientID,string projectType,string thumbUrl,string videoUrl,httppostedfileBase thumbfile,httppostedfileBase videoFile)
        {
            thumbfile = Request.Files[0];
            Project project = new Project();
            project.project_name = projectname;
            project.project_description = description;
            project.clients_client_id = clientID;
            project.project_type = projectType;
            project.thumb_url = thumbUrl;
            project.video_url = videoUrl;



            return null;
        }
ldf2771 回答:使用ajax上传文件,将它们像参数一样传递给控制器

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3169915.html

大家都在问