使文件输入成为一个href

make file input an href

本文关键字：一个 href 文件 输入      更新时间：2023-09-26

我需要隐藏一个输入，这样我看起来就像是在点击一个常规的自定义按钮并启动一个输入类型"file"。我看了几个例子，并使用了我看到的内容，但由于某种原因，我无法启动<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();
});

选择器中有一些无效字符->[]

您可以通过为ID使用jQuery Attribute Equals Selector来避免这个问题，比如这个

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

您可以使用CSS来实现这一点，并且使用z索引和不透明度应该能够实现这一目标。

样本代码

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

如果我理解正确，您希望隐藏文件输入并通过"更好"按钮控制它。试试这个：

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;
}
相关文章：