Question

我正在尝试为用户提供文件上传功能，他们可以一次上传多个文件。我在客户端使用 dropzone.js ，在后端使用C＃。我正在使用MVC剃刀视图，我查看了用户输入其详细信息并在同一页面中上传文件的位置。所以我继续前进并创建了以下方法

[HttpPost]
    public async Task<ActionResult> UploadedFile(int? id)
    {
        foreach (string fileName in Request.Files)
        {
            HttpPostedFileBase file = Request.Files[fileName];
            if (file != null && file.ContentLength > 0)
            {
                //upload file here
                //file gets uploaded successfully 
            }
        }
        return new EmptyResult();
    }

我还需要将模型详细信息存储到DB中，这些方法在另一种方法中完成，如下所示

public async Task<ActionResult> SaveToDb(MyViewModel viewModel)
    {
        if (ModelState.IsValid)
        {
            //Store to db here

            int? id = viewModel.User.UserId;

            //redirect to home page if everything is ok
        }
        return View(viewModel);
    }

现在我的问题是我需要在SaveToDb方法之前运行UploadedFile，因为我想将int? id作为参数传递，因为我在文件名的末尾使用它。我真的似乎无法弄清楚如何解决这个问题。我的客户jQuery看起来像这样：

<script>
    Dropzone.autoDiscover = false;
    var myDropZone = new Dropzone("#dZUpload",{
        url: "/Home/UploadedFile",
        autoProcessQueue: false
    });
    $("#submit-all").on('click', function () {
        myDropZone.options.autoProcessQueue = true;
        myDropZone.processQueue();
    });
    myDropZone.on("addedfile", function (file) {
        var removeButton = Dropzone.createElement("<button class='btn btn-danger'>Remove File</button>");
        var dLink = myDropZone;
        // Listen to the click event
        removeButton.addEventListener("click", function (e) {
            // Make sure the button click doesn't submit the form:
            e.preventDefault();
            e.stopPropagation();

            // Remove the file preview.
            dLink.removeFile(file);
        });
        // Add the button to the file preview element.
        file.previewElement.appendChild(removeButton);
    });
</script>

注意： #submit-all按钮也会提交整个表单

Answer 1

你不需要定义一个不同的上传方法，它可以在这样的后期操作中完成：

<form action="~/Home/SaveDropzoneJsUploadedFiles" class="dropzone" id="dropzoneJsForm"></form>

<button id="submit-all">Submit All Files</button>

</div>

@section scripts {
<script type="text/javascript">

    Dropzone.options.dropzoneJsForm = {

        //prevents Dropzone from uploading dropped files immediately
        autoProcessQueue: false,

        init: function () {
            var submitButton = document.querySelector("#submit-all");
            var myDropzone = this; //closure

            submitButton.addEventListener("click", function () {

                //tell Dropzone to process all queued files
                myDropzone.processQueue(); 
            });

        }
    };

</script>

}

现在对“SaveDropzoneJsUploadedFiles”动作方法首先处理你的db保存代码然后上传文件..这个动作方法也可以采取Model参数

调用方法的顺序

1 个答案: