1

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

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

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

此外，我的 Chrome 浏览器上的 HTML5 文件过滤似乎被破坏了，但这是一个小问题。

任何想法？

4

1 回答 1

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。我已经在 J​​SFiddle 中尝试过，但结果我看不到接受属性。可能由于某种原因它被插件删除

于 2012-08-22T15:56:56.570 回答