blocks|key|249181|text|如果我没记错的话，HTML5允许您在隐藏的输入元素上调用click方法，以通过自定义按钮显示文件对话框(为什么不在没有元素的情况下让它工作，我不知道)。不幸的是，并不是所有当前使用的浏览器都支持这一点，所以你不得不将文件输入的样式设置为一个按钮。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|249182|这是我在一个网站上遇到的一个非常丑陋但巧妙的CSS技巧(可能是imgur)：|249183|.fileupload+{
++++width:+100px;
++++height:+50px;
++++position:+relative;
++++overflow:+hidden;
++++background:+...;+/*+and+other+things+to+make+it+pretty+*/
}

.fileupload+input+{
++++position:+absolute;
++++top:+0;
++++right:+0;+/*+not+left,+because+only+the+right+part+of+the+input+seems+to
+++++++++++++++++be+clickable+in+some+browser+I+can't+remember+*/
++++cursor:+pointer;
++++opacity:+0.0;
++++filter:+alpha(opacity=0);+/*+and+all+the+other+old+opacity+stuff+you
+++++++++++++++++++++++++++++++++want+to+support+*/
++++font-size:+300px;+/*+wtf,+but+apparently+the+most+reliable+way+to+make
+++++++++++++++++++++++++a+large+part+of+the+input+clickable+in+most+browsers+*/
++++height:+200px;
}|code-block|syntax|javascript|249184|以及与之配套的HTML：|249185|<div+class="fileupload">
++<input+type="file"+/>
++Any+content+here,+perhaps+button+text
</div>|249186|它所做的是使文件输入本身变得巨大(通过更改字体大小(!?))以确保它覆盖按钮，然后用overflow:+hidden;剪掉多余的部分。这可能不适用于绝对巨大的按钮。|249187|entityMap^0|S|5|0|0|0|0|0|16|H|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|S|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|T|$]]

<p>If I remember correctly, HTML5 allows you to call the <code>click</code> method on a hidden input element to show the file dialog via a custom button (why not just make it work without an element, I don't know). Unfortunately not all currently in use browsers support this yet, so you're stuck with styling a file input to look like a button.</p>

<p>This is a hilariously ugly but ingenious CSS hack I came across on a site once (probably imgur):</p>

<pre><code>.fileupload {
    width: 100px;
    height: 50px;
    position: relative;
    overflow: hidden;
    background: ...; /* and other things to make it pretty */
}

.fileupload input {
    position: absolute;
    top: 0;
    right: 0; /* not left, because only the right part of the input seems to
                 be clickable in some browser I can't remember */
    cursor: pointer;
    opacity: 0.0;
    filter: alpha(opacity=0); /* and all the other old opacity stuff you
                                 want to support */
    font-size: 300px; /* wtf, but apparently the most reliable way to make
                         a large part of the input clickable in most browsers */
    height: 200px;
}
</code></pre>

<p>And the HTML to go with it:</p>

<pre><code>&lt;div class="fileupload"&gt;
  &lt;input type="file" /&gt;
  Any content here, perhaps button text
&lt;/div&gt;
</code></pre>

<p>What it does is it makes the file input itself enormous (by changing the font size (!?)) to ensure it covers the button, and then cuts off the excess with <code>overflow: hidden;</code>. This may not work for absolutely enormous buttons.</p>


blocks|key|249220|text|您可以使用visibility:+hidden;简单地隐藏input按钮，并将一个单击事件处理程序附加到另一个按钮：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|249221|HTML：|249222|<input+type="file"+name="somename"+size="chars">
<button>Choose+File</button>|code-block|syntax|javascript|249223|CSS:|BOLD|249224|input+{
++++display:+block;
++++visibility:+hidden;
++++width:+0;
++++height:+0;
}|249225|JavaScript:|249226|$('button').click(function(){
++++$('input').click();
});|249227|这就是问题所在：http://jsfiddle.net/tCzuh/|249228|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/tCzuh/^0|5|J|T|5|0|0|0|0|4|0|0|0|B|0|0|8|Q|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1A|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1B|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1C|8|@$9|1D|A|1E|B|O]]|D|@]|E|$]]|$1|P|3|Q|5|J|7|1F|8|@]|D|@]|E|$K|L]]|$1|R|3|S|5|6|7|1G|8|@$9|1H|A|1I|B|O]]|D|@]|E|$]]|$1|T|3|U|5|J|7|1J|8|@]|D|@]|E|$K|L]]|$1|V|3|W|5|6|7|1K|8|@]|D|@$9|1L|A|1M|1|1N]]|E|$]]|$1|X|3|-4|5|6|7|1O|8|@]|D|@]|E|$]]]|Y|$Z|$5|10|11|12|E|$13|14]]]]

<p>You could simply hide the <code>input</code> button with <code>visibility: hidden;</code>, and attach a click event handler to the other button:</p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;input type="file" name="somename" size="chars"&gt;
&lt;button&gt;Choose File&lt;/button&gt;
</code></pre>

<p><strong>CSS:</strong></p>

<pre><code>input {
    display: block;
    visibility: hidden;
    width: 0;
    height: 0;
}
</code></pre>

<p><strong>JavaScript:</strong></p>

<pre><code>$('button').click(function(){
    $('input').click();
});
</code></pre>

<p>Here's the fiddle: <a href="http://jsfiddle.net/tCzuh/">http://jsfiddle.net/tCzuh/</a></p>


blocks|key|3136204|text|下面是一个可以查看的选项：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3136205|http://shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom|offset|length|3136206|这允许对<input>字段进行更多的自定义|style|CODE|3136207|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|29|0|0|4|7|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@$D|S|E|T|1|U]]|A|$]]|$1|F|3|G|5|6|7|V|8|@$D|W|E|X|H|I]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|C]]]]

<p>An option to look at is here:</p>

<p><a href="http://shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom" rel="nofollow">http://shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom</a></p>

<p>This allows for more customization of an <code>&lt;input&gt;</code> field</p>


blocks|key|246275|text|如果将不透明度设置为0，则可以在其下面添加另一个看起来像按钮的div。你可以用你喜欢的任何方式来设计它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|246276|工作代码示例如下：|246277|<script+type="text/javascript"+src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<div+class="wrapper">
++++<div+class="fakeuploadbutton">upload</div>
++++<input+id="file"+type="file"+name="file"+/>
</div>
<script+type="text/javascript"+charset="utf-8">
++++jQuery('#file').css('opacity',0);++++
</script>
<style+type="text/css"+media="screen">
++++.wrapper+{+position:+relative;+}
++++.fakeuploadbutton+{+
++++++++background:+red+url('myuploadbutton.png')+no-repeat+top+left;
++++++++width:+100px;+height:+30px;
++++}
++++#file+{+
++++++++position:+absolute;
++++++++top:+0px;+left:+0px;+
++++++++width:+100px;+height:+30px;
++++}
</style>|code-block|syntax|javascript|246278|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>If you set the opacity to 0, then you can add another div underneath it that looks like a button. You can style this any way you like then.</p>

<p>Working code example below:</p>

<pre><code>&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;

&lt;div class="wrapper"&gt;
    &lt;div class="fakeuploadbutton"&gt;upload&lt;/div&gt;
    &lt;input id="file" type="file" name="file" /&gt;
&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;
    jQuery('#file').css('opacity',0);    
&lt;/script&gt;
&lt;style type="text/css" media="screen"&gt;
    .wrapper { position: relative; }
    .fakeuploadbutton { 
        background: red url('myuploadbutton.png') no-repeat top left;
        width: 100px; height: 30px;
    }
    #file { 
        position: absolute;
        top: 0px; left: 0px; 
        width: 100px; height: 30px;
    }
&lt;/style&gt;
</code></pre>


<blockquote>
  <p><strong>Possible Duplicate:</strong><br>
  <a href="https://stackoverflow.com/questions/1829774/jquery-simulating-a-click-on-a-input-type-file-doesnt-work-in-firefox">jQuery : simulating a click on a &lt;input type=&ldquo;file&rdquo; /&gt; doesn&#39;t work in Firefox?</a>  </p>
</blockquote>



<p>Is it possible to have a file button without an input beside it by default?  Ideally all I want is a button that lets the user navigate to a file without showing what they selected prior to an upload.  I'll submit the form by the following after a user chooses a file:</p>

<pre><code>$("#file").change(function() {
    $("#update_button").trigger('click');
});
</code></pre>

<p>I'm sure this must be possible with some css or jquery magic...</p>


file upload button without input field?

jQuery

HTML5

 可能重复：有没有可能在默认情况下有一个没有输入的文件按钮？理想情况下，我想要的是一个按钮，让用户导航到一个文件，而不显示他们在上传之前选择了什么。在用户选择文件后，我将通过以下方式提交表单：$("#file").change(function() {    $("#update_button").trigger('c...

问没有输入字段的文件上载按钮？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问没有输入字段的文件上载按钮？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问没有输入字段的文件上载按钮？
EN