0

可能重复：
输入类型=文件仅显示按钮

有这样的设计：

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

4

3 回答 3

1

在quirksmode中找到了一个非常好的指南- 设置输入类型 =“文件”

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

  1. 取一个法线<input type="file">并将其放入一个带有position: relative. 或者absolute

  2. 向同一父元素添加具有正确样式的图像或按钮。绝对定位此元素，使它们与<input type="file">.

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

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

于 2012-07-05T04:41:26.197 回答
0

建议：可以使用uploadify插件。

于 2012-07-05T03:51:26.430 回答
0

在您的问题中看不到 jQuery 标记，但是嘿，它很有帮助，并且可能很容易在 vanilla JS 中重写。这是我从Ideal Forms中提取的一个小 jQuery 插件，我在 github 上维护的一个插件。它涵盖了做你想做的所有基础知识，并为 IE 和multipleHTML5 浏览器提供后备。加上处理事件和标记替换。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

于 2012-07-05T03:57:36.190 回答