jquery - AjaxUpload 和修改后的输入文件类型不能一起工作

Question

从一些不错的教程开始，我尝试:1) 使用 jQuery(特别是 AjaxUpload 库)从输入文件按钮上传图像文件。2) 使用 CSS 技巧将默认的 HTML5 输入文件 按钮替换为更漂亮的自定义按钮。3) 使用 HTML5 过滤器允许“仅特定图像”文件上传。

关键是当我使用修改后的输入文件按钮时，AjaxUpload 库似乎被破坏了(即没有任何反应)。

例如，this JSFiddle是使用默认输入文件的测试。如果您尝试上传文件，加载 gif 会告诉您该文件当前正在上传。 This one与修改后的输入文件相同。没有开始加载 gif。

此外，HTML5 文件过滤功能在我的 Chrome 浏览器上似乎已损坏，但这是一个小问题。

有什么想法吗？

Answer 1

这可能是由于AjaxUpload的一些内部逻辑或浏览器的安全限制。用这个 CSS 试试(高度是 30px 而不是 0%):

    .file-wrapper input {
         cursor: pointer;
         font-size: 100px;
         width:100%; height:30px;
         filter: alpha(opacity=1);
         -moz-opacity: 0.01;
         opacity: 0.01;
         position: absolute;
         right: 0;
         top: 0;
     }

另外，关于接受。它必须是这样的(在 Chrome 中肯定有效):

accept="image/jpg,image/jpeg,image/png,image/gif,image/bmp,image/tiff"

并且看起来它不适用于 AjaxUpload。我在 JSFiddle 中尝试过，但结果我看不到接受属性。可能由于某种原因它被插件删除了