用图像替换普通文件上传输入

Question

这里有点新手问题.

我有一个表单,其中一个字段用于文件上传.我希望有一个图像,当你点击打开对话框浏览照片时,我没有让枯燥的旧常用文本输入框旁边有一个"选择文件"按钮.

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

这似乎不起作用,因为在表单中有一个表单必须是不好的做法,我想:)有没有办法这样做？

另一种方法是,我可以用我自己的图形用"选择文件"按钮以某种方式替换通常的文本输入框但是尽管谷歌我没有找到如何做到这一点.

有任何想法吗

Answer 1

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

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

只需background-image在#image div中添加一个属性:)

Answer 2

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

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

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

编辑-这是一个至少可以在 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）会为您提供明显虚假的路径前缀，因此代码会将其删除（因为它没有用）。