用图像替换正常的文件上传输入

Posted 2023-02-24

【中文标题】用图像替换正常的文件上传输入

【英文标题】：Replacing normal file upload input with an image

【发布时间】：2011-12-03 02:11:27

【问题描述】：

这里有一个新手问题。

我有一个表单，其中一个字段用于文件上传。我想要一个图像，而不是在它旁边有一个“选择文件”按钮的无聊的旧文本输入框，当你点击它时会打开对话框来浏览照片。

我希望能够做到这一点的方式是使用两种形式。 IE 当用户单击图像时，会出现一个模式框，其中包含表单上传输入。用户选择文件并点击提交用户返回到表单。

这似乎不起作用，因为我认为在表单中包含一个表单一定是不好的做法:) 有没有办法做到这一点？

另一种方法是，我可以用我自己的图形以某种方式用“选择文件”按钮替换通常的文本输入框，但尽管谷歌我不知道该怎么做。

任何想法

【问题讨论】：

我用一个例子更新了我的答案。

【参考方案1】：

非常简单的解决方案 - 只需为您的输入添加一个标签标签

<label for="uploadFile">
    <div id="image"></div>
</label>
<input type="file" id="uploadFile" style="display:none" />

只需将background-image 属性添加到#image div :)

【讨论】：

哇！这简直太完美了！！！！这个 JSFiddle 是这个简单解决方案的一个活生生的例子：jsfiddle.net/W72N5

这有什么缺点吗？

哇...好吧，这令人印象深刻。

【参考方案2】：

由于文件输入工作方式存在大量安全问题，因此很难修复。然而，有效的是这样的方案：

为文件输入设计自己的外观，在大小和形状上与默认文件输入相当接近 将您的文件输入和一个真实文件输入放在表单中的同一位置，真实的放在您的顶部 使真实输入透明（即，将不透明度设置为零）

现在点击您希望它们看起来的样式的元素实际上将被浏览器解释为点击文件输入。您必须对 IE 进行一些调整，因为 IE7 允许用户直接在输入中键入内容，而其他浏览器在任何地方单击元素时都会立即启动文件选择器。

edit — here 是一个至少可以在 Chrome 中运行的 jsfiddle。 html：

<div class='fancy-file'>
    <div class='fancy-file-name'>&nbsp;</div>
    <button class='fancy-file-button'>Browse...</button>
    <div class='input-container'>
        <input type='file'>
    </div>
</div>

这包含了我将使用自己的 CSS 设置样式的“假”文件输入，以及真正的 <input> 元素。这是 CSS：

div.fancy-file 
    position: relative;
    overflow: hidden;
    cursor: pointer;


div.fancy-file-name 
    float: left;
    border-radius: 3px;
    background-color: #aaa;
    box-shadow:
        inset 1px 1px 3px #eee,
        inset -1px -1px 3px #888,
        1px 1px 3px #222;
    font-weight: bold;
    font-family: Courier New, fixed;
    width: 155px;
    font-size: 12px;
    padding: 1px 4px;


button.fancy-file-button 
    float: left;
    border-radius: 3px;
    border: 1px solid red;
    background-color: #F5BD07;
    font-weight: bold;
    vertical-align: top;
    margin: 0 0 0 3px;


div.input-container 
    position: absolute;
    top: 0; left: 0;


div.input-container input 
    opacity: 0;

外部容器被制成“位置：相对”，以便将真实的<input>定位在假的东西上。假的东西有我虚构的花哨样式，它的大小与真实文件输入的整体大小差不多。真正的是绝对定位和透明的。

这里有一些 jQuery 来驱动它：

$('div.fancy-file input:file').bind('change blur', function() 
    var $inp = $(this), fn;

    fn = $inp.val();
    if (/fakepath/.test(fn))
        fn = fn.replace(/^.*\\/, '');

    $inp.closest('.fancy-file').find('.fancy-file-name').text(fn);
);

浏览器不会为您提供完整的路径名，但会为您提供其中的一部分。一些浏览器（Chrome 和 IE）给你一个明显伪造的路径前缀，所以代码把它去掉了（因为它没用）。

【讨论】：

在另一个表单内的模态框中有一个表单怎么样？这行得通吗？

不，您不能将一个表单放入另一个表单中。这是无效的标记，没有浏览器喜欢它。

感谢您的帮助。我一直在尝试执行您的上述建议，但我无法将图像定位在输入上。你能解释一下我应该做什么吗？非常感谢您的帮助:)

我看看能不能设置个jsfiddle。我在某个地方找到了代码。

【参考方案3】：

文件上传字段非常有限。见：http://www.quirksmode.org/dom/inputfile.html

【讨论】：

在另一个表单内的模态框中有一个表单怎么样？这行得通吗？

你可以，但这只会给你一个模态，而不会真正重新设置控件的样式。