如何更改 <input type="file"> 设计使其不显示文本字段？ [复制]答案

【问题标题】：How to change <input type="file"> design so it won't display the text-field? [duplicate]如何更改 <input type="file"> 设计使其不显示文本字段？ [复制]
【发布时间】：2012-07-05 11:05:16
【问题描述】：

可能重复：
input type=file show only button

有这样的设计：

我可以修改它使其不显示文本字段吗？

【问题讨论】：

请查看stackoverflow.com/questions/1084925/…

标签： javascript save savefiledialog

【解决方案1】：

在quirksmode - Styling an input type="file"找到了一个很好的指南

引用一些修改以匹配问题：

取一个普通的<input type="file"> 并把它放在一个带有position: relative 的元素中。或absolute

向同一父元素添加具有正确样式的图像或按钮。绝对定位这个元素，所以他们与<input type="file">.占据相同的位置

将<input type="file"> 的z-index 设置为2，使其位于样式图像或按钮的顶部。

最后，将<input type="file">的opacity设置为0。 <input type="file"> 现在实际上变得不可见，并且样式图像或按钮通过，但您仍然可以单击“浏览” 按钮。（注意你不能使用visibility: hidden，因为一个真正的不可见元素也是不可点击的，我们需要<input type="file"> 保持可点击状态）

【讨论】：

【解决方案2】：

建议：您可以使用uploadify plugin。

【讨论】：

【解决方案3】：

在您的问题中看不到 jQuery 标记，但是嘿，它很有帮助，并且可能很容易用 vanilla JS 重写。这是我从Ideal Forms 中提取的一个小 jQuery 插件，我在 github 上维护的一个插件。它涵盖了做你想做的所有基础知识，包括 IE 的后备和 HTML5 浏览器的multiple。加上处理事件和标记替换。 CSS 是你自己的，但没有什么太复杂的样式，如你所见。如果需要，您也可以隐藏文本字段。这里的想法是，这允许使用 CSS 进行任何可能的自定义。

$.fn.toCustomFile = function () {
  return this.each(function () {

    var

    $file = $(this), // The file input

    // Necessary markup
    $wrap = $('<div class="wrap">'),
    $input = $('<input type="text" class="filename" />'),
    $button = $('<button type="button" class="upload">Open</button>')

    // Hide by shifting to the left, that way can 
    // still use events that are otherwise problematic
    // if the field is hidden as in "display: none"
    $file.css({
      position: 'absolute',
      left: '-9999px'
    })

    // Events
    $button
      .attr('tabIndex', -1) // disable focus on button for better usability
      .click(function () {
        $file.trigger('click') // Yes, `click`, not `change`. Crossbrowser compat.
      })

    $file
      .attr('tabIndex', -1)
      .on({
        change: function () {
          // Detect if browser supports HTML5 "file multiple"
          var multipleSupport = typeof $('input')[0].multiple !== 'undefined',
              files = [],
              fileArr,
              filename
          if (multipleSupport) {
            fileArr = $file[0].files
            for (var i = 0, len = fileArr.length; i < len; i++)
              files.push(fileArr[i].name)
            filename = files.join(', ')
          } else {
            filename = $file.val().split('\\').pop() // Remove fakepath
          }
          $input.val(filename)
          // Set filename as title tooltip on 
          // input field for better usability
          $input.attr('title', filename)
        },
        focus: function () {
          $input.trigger('focus')
        }
    })

    $input
      .on({
        keyup: function () { $file.trigger('change') },
        focus: function () { $file.trigger('change') },
        blur: function () { $file.trigger('blur') },
        // Open files when pressing [ENTER]
        // on the input field
        keydown: function (e) { if (e.which === 13) $file.trigger('click') }
      })

    // Append to DOM
    $wrap.append($button, $input).insertAfter($file)

  })
}

这里有一个易于使用的要点：https://gist.github.com/3051209

【讨论】：