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

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

因此，解决的方案为：

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

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

即可。

以下附上全部代码：

jsp弹层：

<!--  modal1 上传附件  -->
<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"><!--projectPlan-->
                                    <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" οnclick="save()">保存
                </button>
            </div>
        </div>
    </div>
</div><!-- /.modal -->

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");

扫描二维码关注公众号，回复： 8680831 查看本文章