6

如果我有某个input type="file"地方，并且单击某个链接，它也会触发对文件输入的单击。用户选择一个文件。

在 IE8/9 中，如果用户单击button type="submit"第一次单击会清除文件输入中的所有数据，则第二次单击会提交一个空白表单。

如何允许提交input type="file"帖子一个 javascript 点击触发器。

一些注意事项：

  • 该点击是由于另一个点击事件而触发的。活动内。
  • 输入类型=“文件”未设置为显示：无。
  • 没有尝试操纵用户输入

想法？

4

2 回答 2

5

我一直在努力解决同样的问题，但我还没有找到一个干净的解决方案。

但是，我发现了一种解决方法。请注意，以下解决方案完全无视最佳实践（以我的拙见），如果有人有更好、更符合标准的方法，请在此处发布。

修复按钮点击事件

经过大量研究后，似乎很多人都在使用一种技巧，即他们绝对将<input type="file" />按钮放在按钮上方，并将不透明度设置为零。这意味着，对于用户来说，他们似乎在点击一个按钮，但浏览器将其视为点击<input type="file" />（因此避免了 IE 中提到的问题）。我很惊讶地看到Quirksmode居然推荐了这种方法。

修复按钮样式

现在，这确实引入了更多的外观问题；您可能会发现您的按钮不再触发它们的:hover和:activeCSS 伪类（除非您将其<input type="file" />放在按钮内部），并且您的鼠标光标可能是默认的鼠标光标，尽管您已将任何 CSS 应用于您的<input type="file" />或您的按钮。

使用 JavaScript 解决方法可以轻松修复这些类（我将把它留给您），但光标仍然是一个问题。奇怪的是，您可以cursor设置 右侧的path样式<input type="file" \>，但这不会影响它的Browse按钮。不幸的是，这个（现在是透明的）按钮可能会在您的样式按钮的某些部分上方，从而导致默认光标悬停。

为了解决这个问题，我偶然发现了这个解决方法（此处为JSFiddle ）。基本上，有人已经将一个事件绑定到他们的按钮事件，并且每次他们将鼠标悬停在按钮上时都将鼠标光标mousemove定位在右侧。如果按钮没有固定大小和设置<input type="file" />，这可能还需要稍微增强，以阻止从按钮坐标之外单击。<input type="file" />overflow: hidden

结论

总的来说，我发现造型<input type="file" />不值得。hack 太多了，如果你真的想让 JavaScript 看起来不错，你可能不得不在某些时候使用它（如果你想支持禁用 JavaScript 的人，那就不好了）。我也不知道这对移动设备有何影响。

如果您的目标是支持Html5 文件 API的较新浏览器，请实施 AJAX 拖放上传解决方案（这是一个不错的解决方案），并完全摆脱<input type="file" />。对于那些不支持它的人（旧浏览器和禁用 JavaScript 的浏览器），只需将 unstyled<input type="file" />留在那里作为后备。

于 2013-04-22T15:46:36.747 回答
2

我发现使用jquery fileupload 扩展名更好。它处理错综复杂的事情比我手动做的要好得多。它基本上完成了 jquery 对 x-browser dom 操作和 ajax 所做的工作，但输入类型 =“file”。

于 2013-07-08T12:58:59.793 回答