Question

HTML：

<div class="fileinputs">
    <input type="file" name="postgallery_set-0-image_0" id="id_postgallery_set-0-image_0">
    <div class="fakefile">
        <img src="/img/image_choice.png" />
    </div>
</div>

CSS：

div.fileinputs {
            position: relative;
        }

        div.fakefile {
            top: 0px;
            left: 0px;
            z-index: 1;
            cursor: pointer;
        }

        .fileinputs input {
            position: relative;
            text-align: right;
            -moz-opacity:0 ;
            filter:alpha(opacity: 0);
            opacity: 0;
            z-index: 2;
        }

和JS：

$('.fakefile').click(function() {
    $(this).parent().children('input').click();
});

这在Chrome和Firefox中运行良好在IE8中，发生以下情况：一切正常，但是当提交表单文件输入被清除时，表单不会发送，光标放在隐藏文件输入上，如何让它在IE中工作？

Answer 1

你实际上不需要JS来实现这种效果。 HTML <label>仅适用于此类事情。 e.g。

<div class="fileinputs">
  <input type="file" name="postgallery_set-0-image_0" id="id_postgallery_set-0-image_0">
  <label for="id_postgallery_set-0-image_0">
    <img src="/img/image_choice.png" />
  </label>
</div>

如何模仿点击文件输入？

1 个答案: