Загружайте файлы, используя ajax, передавая их как параметры в контроллер - PullRequest
0 голосов
/ 04 ноября 2019

У меня довольно уникальная проблема, у меня есть модель, которая ссылается на список моделей, и мне нужно передать список целых в контроллер, поэтому для решения этой проблемы я использовал вызов ajax с традиционным параметром: true ивведите get, чтобы я мог получить список идентификаторов и отправить их на контроллер. Но теперь я столкнулся с другой проблемой, потому что мне нужно загрузить 2 файла, одно видео и один эскиз. Я пробовал несколько способов добиться этого, но ни один из них не дал результата для меня, HttpPostedFileBase всегда нулевой.

Я пытаюсь вызвать другой ajax с помощью «кнопки загрузки» рядом с тегом input type = «file», но безрезультатно.

Это 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), new { @class = "form-control input-flat", @placeholder = "Project name", @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, new { @type = "file", @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;
        }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...