KindEditor上传组件在modal中点击无响应

柔光的暖阳◎ 2022-05-23 08:59 198阅读 0赞

今天在modal中加上了KindEditor上传组件，组件初始化已成功，但是点击“点击上传附件”按钮无响应，不弹出上传窗口。尝试了百度提供的各种诸如修改z-index值、去掉modal的遮罩层、在弹出modal时初始化上传插件等方案均不生效。最后，在调试查看各组件的css属性时，找到了问题：

![20180606093102101][]

如图所示，在初始化后的上传组件中，响应上传事件的部分宽度为0.因此，点击无响应的原因主要是，实际上，点击时，并没有点击到上传部分，无法触发响应事件。

因此，解决的方案为：

在弹出弹层前，先将该上传插件的width属性设置为合适的宽度，也就是在js中补充一句：

$("[type='file']").css("width","96px");

即可。

以下附上全部代码：

jsp弹层：

<div id="aModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">附件</h4>
                </div>
                <div class="modal-body">
    
                    <form class="form-horizontal" id="aForm">
    
                        <h3>请上传附件！</h3>
    
                        <br/>
    
                        <div class="row">
    
                            <div class="col-md-12">
                                <div class="form-inline">
                                    <label class="control-label col-sm-4">附件</label>
                                    <div class="addDiv text-center  col-col-sm-8">
                                        <input type="button" id="fileUpload" value="点击上传附件"/>
                                        <a href="" download="file1" id="downUrl7"></a>
    
                                        <i id="fileName7"></i>
    
                                        <input type="hidden" id="fileName"
                                               name="fileName"/>
                                        <input type="hidden" id="fileUrl"
                                               name="fileUrl"/>
                                    </div>
                                </div>
                            </div>
    
                        </div>
    
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-info waves-effect waves-light" onclick="save()">保存
                    </button>
                </div>
            </div>
        </div>
    </div>

z在js中，要先初始化上传组件

KindEditor.ready(function (K) {
        var uploadbutton = K.uploadbutton({
            button: K('#fileUpload'),
            fieldName: 'uploadFile',
            url:  '/uploadFile',
            afterUpload: function (data) {
    
                console.info(data);
    
                if (data.error == 0) {
                    $('#fileName').val(data.fileName);
                    $('#fileUrl').val(data.url);
                    $('#downUrl7').attr('href', data.url)
                        .attr('style', 'color: blue;');
                    $('#downUrl7').html('点击下载');
                    $('#downUrlg').hide();
                    $('#fileName7').html(data.message + '<br/>' + data.fileName);
    
    
                } else {
                    alert(data.message);
                }
            },
            afterError: function (str) {
                alert('自定义错误信息: ' + str);
            }
        });
    
        uploadbutton.fileBox.change(function (e) {
            uploadbutton.submit();
        });
    });

最重要的一点，弹出弹层前初始化上传插件的width属性：

$("[type='file']").css("width","96px");
     $("#aModal").modal("show");
     $("#aModal").modal("show");

[20180606093102101]: /images/20220523/c5754aa0a07d4ef3b742d213506627a7.png