文件上传无法使用Bootstrap模态

时间:2016-08-13 03:13:28

标签: javascript jquery bootstrap-modal

我正在尝试使用模式上传文件。它处理文件选择而不是单击按钮。

下面的代码是针对调用我的模态的按钮:

 <button type="button" class="btn btn-primary btn-xs"
         id="browseAndLoad" name="browseAndLoad">
     File Upload
 </button>

下面的代码是我的模态对话框:

<div class="modal fade" id="completeBrowse" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4><span class="glyphicon glyphicon-lock"></span> Upload File</h4>
            </div>
            <div class="modal-body" id="completeBrowseBody">
                Choose and Upload
                <input type="file" name="datafile" class="form-control" /><br/>
                <div id="upload" style="display:none;">Uploading..</div>
                <input type="button" class="btn btn-default btn-xs"
                       id="uploadingFileButton" name="uploadingFileButton"
                       value="Upload"/>
            </div>
            <div class="modal-footer">
                <em> Click on <strong>Choose File/ Browse</strong> to select and upload a file </em>
            </div>
        </div>
    </div>
</div>

以下是我试图实施的文件上传部分:

$('input[name="uploadingFileButton"]').ajaxfileupload({
            'params': '${formRoot.Number}:${headerModel.User}',
            'action': path,
    //      'orderID', '${formRoot.Number}',
            'onComplete': function(response) {
                $('#upload').hide();
                if(response.status)
                    alert("File SAVED!!");
            },
            'onStart': function() {
                $('#upload').show();
            }
        });

如果我使用与下面相同的代码,它可以正常工作。但问题是我浏览并选择上传的文件的那一刻...... 我正在尝试浏览并选择文件时单击“选择文件/浏览”按钮,上传按钮单击文件应该上传...

$('input[type="file"]').ajaxfileupload({
           'params': '${formRoot.Number}:${headerModel.User}',
            'action': path,
    //      'orderID', '${formRoot.Number}',
            'onComplete': function(response) {
                $('#upload').hide();
                if(response.status)
                    alert("File SAVED!!");
            },
            'onStart': function() {
                $('#upload').show();
            }
        });

1 个答案:

答案 0 :(得分:0)

我认为ajaxfileupload接受文件类型输入

你应该把你的代码

$('input[type="file"]').ajaxfileupload({
           'params': '${formRoot.Number}:${headerModel.User}',
            'action': path,
    //      'orderID', '${formRoot.Number}',
            'onComplete': function(response) {
                $('#upload').hide();
                if(response.status)
                    alert("File SAVED!!");
            },
            'onStart': function() {
                $('#upload').show();
            }
        });

uploadingFileButton按钮

的点击处理程序中