上传完成后,dropzonejs打开模态框

时间:2014-03-04 21:45:01

标签: ajax asp.net-mvc file-upload dropzone.js

我在asp.net mvc5应用程序中使用dropzonejs。我正在尝试一个应用程序,当用户将文件拖到dropzone,打开一个模态框并希望他填写与文件相关的表单。我想将这些信息插入数据库。

我正在使用bootstrap模式框。

我该怎么做?我应该从哪里开始?

我应该在哪种方法中打开对话框?完成功能?

myDropzone.on("complete", function(file) {
  //Open Modal Box
});

1 个答案:

答案 0 :(得分:1)

以下是解决方案:

  <script type="text/javascript">

    Dropzone.options.dropzoneJsForm = {

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

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

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

                myDropzone.processQueue();
            });
            myDropzone.on("complete", function (file) {
                $('#myModal').modal('show')
            });

        }
    };

</script>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                asdasdsadsd
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>