当前位置：文江博客话题详情

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

发布于 2024-12-08 17:01:54 字数 325 浏览 0 评论 0原文

这里有一个新手问题。

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

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

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

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

任何想法

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

秉烛思 2024-12-15 17:01:55

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

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

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

Very simple solution - simply put a label tag for your input

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

And the just add a background-image property to the #image div :)

回复收藏 0 原文

时光磨忆 2024-12-15 17:01:55

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

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

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

编辑 - 这里是一个至少可以在 Chrome 中运行的 jsfiddle。 HTML：

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

它包装了我将使用自己的 CSS 设计样式的“假”文件输入以及真正的元素。这是 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”，以便轻松将真实的放置在假的东西上。假的东西有我编造的奇特风格，它的大小与真实文件输入的整体大小几乎相同。真品是绝对定位、透明的。

这里有一些 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）会为您提供明显虚假的路径前缀，因此代码会将其删除（因为它没有用）。

Because of the heap of security issues around how file inputs work, they're pretty hard to fix. What does work, however, is a scheme like this:

Design your own look for a file input that's fairly close to the default one in size and shape
Position your file input and a real file input at the same place in your form, with the real one on top of yours
Make the real input be transparent (that is, set the opacity to zero)

Now clicks on your elements styled the way you want them to look will actually be interpreted by the browser as clicks on the file input. You have to tweak things somewhat for IE, because IE7 allows the user to type directly into the input while other browsers all immediately launch the file chooser when the element is clicked anywhere.

edit — here is a jsfiddle that works in Chrome at least. The HTML:

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

That wraps the "fake" file input that I'll style with my own CSS, as well as the real <input> element. Here's the 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;
}

The outer container is made "position: relative" to make it easy to position the real <input> over the fake stuff. The fake stuff has my made-up fancy styles, and it's sized so that it's just about the same as the overall size of a real file input. The real one is absolutely positioned and transparent.

Here's some jQuery to drive it:

$('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);
});

Browsers won't give you the complete pathname, but they'll give you a part of it. Some browsers (Chrome and IE) give you an obviously-fake path prefix, so the code strips that out (because it's useless).

回复收藏 0 原文