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

问题描述

这里有一个新手问题。

我有一个表单，其中一个字段用于文件上传。我想要一个图像，当您点击打开对话框浏览照片，而不是有无聊的老常规文本输入框与其旁边的选择文件按钮。

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

这似乎不工作，因为在表单中有一个表单必须是糟糕的做法，我想： ）有一种方法这样做吗？

另一种方法是，我可以以某种方式用选择文件按钮替换通常的文本输入框与我自己的图形

解决方案

任何想法

/ div>

由于文件输入工作方式的安全问题堆，它们很难修复。然而，什么工作是这样的计划：

• 设计自己的查找文件输入相当接近默认的尺寸和形状


• 将您的文件输入和真实文件输入放置在表单的同一位置，
  
• 使实际输入为透明（即将不透明度设置为零）

元素样式，你希望他们看起来实际上会被浏览器解释为点击文件输入。你必须调整IE的一些东西，因为IE7允许用户直接输入的输入，而其他浏览器所有立即启动文件选择器的元素在任何地方点击。

编辑— 这里是一个至少在Chrome中工作的jsfiddle。 HTML：

 < div class ='fancy-file'> 
< div class ='fancy-file-name'>& nbsp;< / div> 
< button class ='fancy-file-button'>浏览...< / 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来驱动它：

 
 code> $（'div.fancy-file input：file'）。bind（'change blur'，function（）{
 var $ inp = $（this），fn; 
 b $ b fn = $ inp.val（）; 
 if（/fakepath/.test(fn））
 fn = fn.replace（/^.* \\ /，''） ; 
 
 $ inp.closest（'。fancy-file'）。find（'。fancy-file-name'）.text（fn）; 
}）; 
  

浏览器不会给你完整的路径名，但他们会给你一部分。一些浏览器（Chrome和IE）给你一个明显的路径前缀，所以代码剥离（因为它是无用的）。

Bit of a newbie question here.

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.

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.

Any ideas

解决方案

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'>&nbsp;</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).

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