用图像替换正常的文件上传输入 [英] Replacing normal file upload input with an image

问题描述

这里有一个新手问题.

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

I have a form and one of it's fields is for a file upload. Instead of having the boring old usual text input box with a 'choose file' button beside it, I'd like to have an image which when you click opens the dialog box to browse for the photo.

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

The way I was hoping to be able to do this was with two forms. IE when the user clicks the image a modal box appears with form upload input in it. User chooses file and clicks submit the user is returned to the form.

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

That doesn't seem to work because having a form inside a form must be bad practice i suppose :) Is there a way to do it like this?

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

The alternative is that I can somehow replace the usual text input box with the 'choose file' button with my own graphic but despite google I ain't found out how to do that.

任何想法

推荐答案

由于围绕文件输入工作方式的大量安全问题，它们很难修复.然而，有效的是这样的方案:

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)

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

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.

编辑 —here 是一个至少可以在 Chrome 中运行的 jsfiddle.HTML:

edit — here is a jsfiddle that works in Chrome at least. The 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:

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

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

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.

这里有一些 jQuery 来驱动它:

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);
});

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

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).

这篇关于用图像替换正常的文件上传输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！