Question

这里有点新手问题。

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

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

这似乎不起作用，因为在表单中包含表单必定是不好的做法我猜想:)有没有办法这样做？

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

任何想法

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允许用户直接输入输入，而其他浏览器都可以在任何地方点击元素时立即启动文件选择器。

编辑 - 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;
}

将外部容器设置为“position：relative”，以便于将真实<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）给你一个明显假的路径前缀，所以代码将其删除（因为它没用）。

Answer 3

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

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

3 个答案: