Question

我需要帮助。

在我看来，我有一个文件选择器，它将在我的数据库中的某个表中加载一个文件，按钮点击它调用一个引导模式，询问用户是否上传了更多文件。

我的观点：

 @using (Html.BeginForm("UploadFile", "Upload", FormMethod.Post, new { enctype = "multipart/form-data" }))
            {

            <div>
                @*@Html.TextBox("file", "", new { type = "file" }) <br />*@
                <input type="file" name="file" accept=".csv" />
                @*<input type="submit" value="Upload New Accounts File" class="btn btn-primary btn-lg" onclick="Confirm()" />*@
                <input type="submit" value="Upload New Accounts File" class="btn btn-primary btn-lg"  data-toggle="modal" data-target="#confirmDialog" />
                @ViewBag.Message
            </div>
        }

我的模态：

<!-- Modal -->
<div class="modal fade" id="confirmDialog" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="ModalLabel">Confirmation Required</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Do you have more files to upload?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Yes</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
            </div>
        </div>
    </div>
</div>

我的控制器：

public ActionResult UploadFile()
        {
            return View();
        }
        [HttpPost]
        public ActionResult UploadFile(HttpPostedFileBase file, string confirm_value)
        {
//TODO
//TODO
}

我的问题如下：

在使用模式之前，当我单击此按钮“上载新帐户文件”时，文件将加载到数据库，但现在它调用模态。当用户在模态上单击是时，我想将文件加载到数据库，但我不知道如何。

请帮忙。

Answer 1

您可以使用Ajax执行此操作，如下所示：

模态（添加onclick到按钮）

<div class="modal-footer">
    <button type="button" onclick="upload()" class="btn btn-primary" data-dismiss="modal">Yes</button>
     ...
</div>

<强> JS

function upload() {
    var fdata = new FormData();

    $('input[name="file"]').each(function(a, b) {
        var fileInput = $('input[name="file"]')[a];
        if (fileInput.files.length > 0) {
            var file = fileInput.files[0];
            fdata.append("fileUpload", file);
        }
    });


    $.ajax({
        type: 'post',
        url: '/UploadFile/Upload',
        data: fdata,
        processData: false,
        contentType: false,
        success: function(e) {
            // Do success process
        }
    });
}

<强>动作

[HttpPost]
public ActionResult UploadFile(HttpPostedFileBase file) {
    //TODO
    //TODO
}

Bootstrap Modal，在按钮上单击

1 个答案: