input的file要点击两次才弹出选择文件窗口

发表于 | 阅读次数: |

作为一个前端开发，在日常编码过程中各个元素的使用也比较常见，但是其各个属性都清楚？答案可能不太一样。然而，我自己真诚的说一句，好多东西我真的不太清楚 ^_^

下面记录一下我本次遇到的一个问题，场景是这样的，工作中遇到了一个需要处理上传图片的场景，作为一个屌(lan)丝(duo)的程序猿当然是思考好用又不费力的插件；那当然是 plupload.js 咯，于是赶紧找到了它的官方网站对场景使用参考了一番。

使用前的测试代码

  • html代码如下：

    1
    2
    3
    4
    5
    6
    7
    <ul id="filelist"></ul>
    <div class="plupload-content">
      <a id="browse" href="javascript:;">[点击上传文件]</a>
      <span> -- </span>
      <a id="start-upload" href="javascript:;">[Start Upload]</a>
    </div>
    <pre id="console"></pre>

  • javascript代码如下（moxie.swf,moxie.xap这两个文件也是从官网下载）：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
     var uploader = new plupload.Uploader({
        runtimes : 'html5,html4,flash,silverlight',
        browse_button: 'browse',
        url: '',
        flash_swf_url: '../js/moxie.swf',
        silverlight_xap_url: '../js/moxie.xap',
        chunk_size: 0,
        max_retries: 1,
        multi_selection: false,

        filters: {
          mime_types : [],
          prevent_duplicates: true,
          max_file_size: '10240kb',
          max_file_count: 1,
        },
    });

    uploader.init();

    uploader.bind('FilesAdded', function(up, files) {
        var html = '';
        plupload.each(files, function(file) {
          html += '<li id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></li>';
        });
        document.getElementById('filelist').innerHTML += html;
      });

    uploader.bind('UploadProgress', function(up, file) {
        document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
    });

    uploader.bind('Error', function(up, err) {
        document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
    });

    document.getElementById('start-upload').onclick = function() {
      uploader.start();
    };

经过上面的操作后，在页面中完美运行，OK，此时美美哒，可以开始应用到项目中去了吧，那就开始整吧。

项目中实际使用

  • 引入plupload.full.min.js并开始使用
    在官网将此插件代码下载到本地，在项目中引入*.js，然后依次将测试中的代码复制到正式项目，启动运行；
    what? 此时发现无论如何点击上传文件打开选择文件夹按钮始终没生效，点击没有任何反应；通常情况下，首先怀疑一波代码，通过断点依次执行，OK，页面没有任何异常，改执行的都执行了，但是就是没有打开选择文件夹按钮。气急败坏之下，对鼠标连续点击了几下，结果选择文件夹打开了，这又是什么情况。。。。好吧，打开了说明此代码是生效了，那就继续干吧，通过仔细观察发现，双击打开选择文件夹按钮就能成功打开当前选择文件夹，此时脑海中好像知道了点儿什么，这貌似是 input 的 type=’file’属性的问题(以前看见过一篇博客说过)，这是因为 plupload.js 文件有一个 browse_button 属性，它的作用是触发文件选择对话框的DOM元素，当点击该元素后便后弹出文件选择对话框，该值可以是DOM元素对象本身，也可以是该DOM元素的id。但实际上plupload是自动生成一个上传file的input,即：
    1
    2
    3
    <div id="html5_1c14fq5te5gq90lpa1j2q8ip4_container" class="moxie-shim moxie-shim-html5" style="position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;overflow: hidden;z-index: 1;">
      <input id="html5_1c14fq5te5gq90lpa1j2q8ip4" type="file" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" accept="" tabindex="-1">
    </div>

发现此时的 div 已经浮动并且其width、height值都等于0，则input的width、height在此时100%的情况下也等于0，导致点击我们自己设置的上传按钮时不能够触发当前的file，就不会触发打开选择文件夹事件，说到这里是不是明白了，嗯，就是你想的那样，简单有效的方法是给此 div 重置一个样式让其覆盖在我们自定义的点击按钮上，让其透明，不是真正的display:none，此时点击就没问题了。

如有更好的建议，欢迎留言哦~~