WebUploader 选择文件按钮点击无效，无法弹出文件选择对话框问题解决（两种情况）

╰+攻爆jí腚メ 2023-10-05 13:04 11阅读 0赞

### 1 问题描述 ###

点击选择文件按钮，无法弹出文件选择对话框。

### 2 问题解决 ###

本人总结了两种点击选择文件按钮无效的情况。

#### 2.1 selectFile元素初始化错误 ####

文件选择按钮初始化之前的HTML代码：

WebUploader初始化之后的HTML代码：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70][]

由此可以看出是id为selectFile的div标签内的第二个div子标签引起的，原因就是宽度width和高度height都为1px，导致选择文件按钮点击无效。

解决办法：

将\#selectFile（div标签）的div子标签宽高都设为100%。

#selectFile div{
        width:100%;
        height:100%;
    }

#### 2.1 使用artDialog组件时，需要先加载对话框，再加载uploader对象。 ####

attachDialog = art.dialog({
        left: '50%',
        top: '50%',
        width: 670,
        height: 340,
        fixed: true,
        resize: false,
        padding: 0,
        id: "UploadDialog",
        title: "上传",
        content: $("#DialogContent").html(),
        init: function () {
            InitUploadFile();
        }
    });

InitUploadFile()方法加载uploader对象。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201102185545144.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70