1

我正在为 IE8（客户端要求）开发一个网站，我在其中提供图像上传功能。使用 CSS 我将浏览按钮（即输入类型 = 文件）作为图像（背面图像并将浏览按钮的不透明度设置为 0）。

因此，每当用户单击图像时，我都想打开文件上传器弹出窗口。我附上了两张图片。一个不透明度为 0，一个不透明度。

IN IE8 输入型文件左侧有一个文本框，右侧有一个浏览按钮。要打开上传器弹出窗口，我可以单击浏览按钮，但我需要双击我的客户不想要的文本框。

为了解决这个问题，我在 input type=file 顶部添加了一个新按钮，并在其 onclick 事件中触发了浏览按钮的单击事件。它打开文件上传器，但是当我发布表单图像时没有上传并且失败，错误代码为 4（没有上传文件）。

有什么办法可以让我只在 IE8 中单击一下。在所有其他浏览器中，只需单击即可完美运行。

有任何想法吗？

谢谢，

浏览按钮将出现在 html 上

实际呈现的浏览按钮

4

1 回答 1

2

看看这个小提琴。

不是来自用户的点击将无法正常运行。设置文件输入字段的样式不会使按钮的大小超出限制，因此您可以使用 zoom 属性。

我不确定您的代码的其余部分是什么样的，但是使用以下 CSS 作为父级和文件输入可以工作，因此您可以调整值以满足您的需要：

.uploadTrigger {
    height: 500px;
    width: 500px;
    background: url("http://i.stack.imgur.com/PTB47.png") center -20px;
    overflow: hidden;
    position: relative;
}
.uploadTrigger input[type="file"] {
    height: 50px;
    width: 50px;
    opacity: 1;
    cursor: pointer;
    zoom: 10;
    -moz-transform: scale(10) translate(22px, 22px);
    position: absolute;
    top: 0;
    left: 0;
}

如果您尝试将不透明度更改为 1，您会注意到该按钮占据了整个父级，因此您的用户只需单击一下即可打开文件选择窗口。

上面的代码已经过修改以在 IE9、Chrome(28) 和 Firefox(21) 中提供一致的行为。如果你正在开发一个内部站点并且你确定只需要 IE8 支持，你可以去掉-moz-transform: scale(10) translate(22px, 22px);

稍后我将在 IE8 上对其进行测试，如果发现它出现功能障碍，我将进行更新。

于 2013-07-18T11:18:57.383 回答