Question

我需要隐藏输入，以便我看起来像是在点击常规自定义按钮并触发输入类型“文件”。我看了几个例子并使用了我看到的内容，但出于某种原因我无法触发<a>标签。我错过了什么？

HTML：

<input id="ad-docs[]" type="file" name="ad-docs[]" multiple="multiple" style="display:none;"/>
    <a id="upload_link" class="button-link button-link-blue">BROWSE</a>

JS：

$("#upload_link").click(function(){
    $("#ad-docs[]").click();
});

Answer 1

您的选择器中有一些无效字符 - ＆gt; []

您可以使用jQuery Attribute Equals Selector作为您的ID来避免此问题，例如

$("[id='ad-docs[]']").click();

Answer 2

您可以使用CSS执行此操作并使用z-index和opacity，您应该能够实现此目的。

示例代码

<强> HTML

<div id="container">
  <input type="file" id="txtFile" />
  <button id="btnFile">
    Click me
  </button>
</div>

<强> CSS

#container {
  positin: relative;
}

#txtFile {
  position: absolute;
  z-index: 50;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* IE 5-7 */
  filter: alpha(opacity=0);
  /* Netscape */
  -moz-opacity: 0;
  /* Safari 1.x */
  -khtml-opacity: 0;
  /* Good browsers */
  opacity: 0;
}

#btnFile {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
}

<强> JSFIDDLE

Answer 3

如果我理解正确，你想隐藏文件输入并通过“更好”按钮控制它。试试这个：

HTML

<span class="btn-file">
   <span>Click to select or simply drag and drop files here...</span>
   <input type="file" id="files" required multiple>
</span>

CSS

.btn-file {
    position: relative;
    overflow: hidden;
    height: 4em;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

make file输入一个href

3 个答案: