<input type=file />テキストフィールドなしで「参照」ボタンのみを表示するように要素（またはスクリプト）のスタイルを設定する方法はありますか？
ありがとう
編集：なぜこれが必要なのかを明確にするためです。http://www.morningz.com/?p=5のマルチファイルアップロードコードを使用していますが、値がないため、テキスト入力フィールドは必要ありません。スクリプトは、新しく選択したファイルをページのコレクションに追加するだけです。可能であれば、テキストフィールドがないと見栄えがよくなります。
回答:
<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />これはきっと私が自分のプロジェクトで使用したことで機能するでしょう。
私はこれを成し遂げるためにかなりの時間を過ごしていました。Flashソリューションを使用したくなかったし、私が調べたjQueryライブラリーのどれもすべてのブラウザーで信頼できるものではありませんでした。
CSSで完全に実装された独自のソリューションを思いつきました（ボタンが「クリックされた」ように見えるようにするonclickスタイルの変更を除く）。
ここで実際の例を試すことができます： http : //jsfiddle.net/VQJ9V/307/（FF 7、IE 9、Safari 5、Opera 11、Chrome 14でテスト済み）
大きなファイル入力（font-size：50px）を作成し、固定サイズとオーバーフロー：hiddenを持つdivでラップすることで機能します。入力は、この「ウィンドウ」divを通じてのみ表示されます。divには背景の画像または色を指定でき、テキストを追加でき、入力を透明にしてdivの背景を表示できます。
HTML：
<div class="inputWrapper">
<input class="fileInput" type="file" name="file1"/>
</div>CSS：
.inputWrapper {
height: 32px;
width: 64px;
overflow: hidden;
position: relative;
cursor: pointer;
/*Using a background color, but you can use a background image to represent a button*/
background-color: #DDF;
}
.fileInput {
cursor: pointer;
height: 100%;
position:absolute;
top: 0;
right: 0;
z-index: 99;
/*This makes the button huge. If you want a bigger button, increase the font size*/
font-size:50px;
/*Opacity settings for all browsers*/
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}何か問題がある場合はお知らせください。修正を試みます。
これを機能させるために、今日は一日を無駄にしました。私はここで私のシナリオのそれぞれを機能させるソリューションを見つけられませんでした。
次に、テキストボックスなしのJQueryファイルアップロードの例を見ました。だから私がやったことは、私が彼らの例を取り、関連する部分にそれを取り除いたことです。
このソリューションは、少なくともIEとFFで機能し、完全にスタイルを設定できます。以下の例では、ファイルの入力は「ファイルを追加」ボタンの下に隠されています。
<html>
<head>
<title>jQuery File Upload Example</title>
<style type="text/css">
.myfileupload-buttonbar input
{
position: absolute;
top: 0;
right: 0;
margin: 0;
border: solid transparent;
border-width: 0 0 100px 200px;
opacity: 0.0;
filter: alpha(opacity=0);
-o-transform: translate(250px, -50px) scale(1);
-moz-transform: translate(-300px, 0) scale(4);
direction: ltr;
cursor: pointer;
}
.myui-button
{
position: relative;
cursor: pointer;
text-align: center;
overflow: visible;
background-color: red;
overflow: hidden;
}
</style>
</head>
<body>
<div id="fileupload" >
<div class="myfileupload-buttonbar ">
<label class="myui-button">
<span >Add Files</span>
<input id="file" type="file" name="files[]" />
</label>
</div>
</div>
</body>
</html>input-file要素を非表示にし、そのinput-fileのクリックイベントをトリガーする表示ボタンを作成します。
これを試して：
CSS
#file { width:0; height:0; } HTML：
<input type='file' id='file' name='file' />
<button id='btn-upload'>Upload</button>JAVASCRIPT（jQuery）：
$(function(){
$('#btn-upload').click(function(e){
e.preventDefault();
$('#file').click();}
);
});cssで入力ファイルのタグを非表示にし、ラベルを追加して、それを入力ボタンに割り当てます。ラベルはクリック可能で、クリックするとファイルダイアログが表示されます。
<input type="file" name="imageUpload" id="imageUpload" class="hide"/>
<label for="imageUpload" class="button-style">Select file</label>スタイルをボタンとしてラベルに追加します。
ライブデモ
onchangeハンドラーをに追加して、inputJSコードがアップロードされたファイル情報を取得できるようにします。
それは非常に難しいでしょう。ファイル入力タイプの問題は、通常、1つのDOM要素として扱われる一方で、2つの視覚要素で構成されることです。それに加えて、いくつかのブラウザーはファイル入力に対して独自のルックアンドフィールを備えており、悪夢に陥ります。quirksmode.orgでこの記事を参照してくださいファイル入力の癖については、。私はそれがあなたを幸せにしないことを保証します（私は経験から話します）。
[編集]
実際には、コンテナー要素（divなど）に入力を配置し、要素に負のマージンを追加することで問題がなくなると思います。画面からテキストボックス部分を効果的に隠す。別のオプションは、リンクした記事の手法を使用して、ボタンのようにスタイルを設定することです。
すべてのブラウザーで機能するように修正しました解決済み：
<input type = "button" value = "Choose image"
onclick ="javascript:document.getElementById('imagefile').click();">
<input id = "imagefile" type="file" style='visibility: hidden;' name="img"/>私はFF、Chrome、IEでテストしました-正常に動作し、適用されたスタイルも：D
これを行う別の簡単な方法。HTMLで「入力タイプファイル」タグを作成して非表示にします。次に、ボタンをクリックして、必要に応じてフォーマットします。この後、ボタンがクリックされたときにjavascript / jqueryを使用してプログラムでinputタグをクリックします。
HTML：-
<input id="file" type="file" style="display: none;">
<button id="button">Add file</button>JavaScript：-
document.getElementById('button').addEventListener("click", function() {
document.getElementById('file').click();
});jQuery：-
$('#button').click(function(){
$('#file').click();
});CSS：-
#button
{
background-color: blue;
color: white;
}これは同じための動作するJSフィドルです：-http : //jsfiddle.net/32na3/
上記で推奨されたコードの一部を使用し、何時間も腰を下ろした後、最終的にcss bag freeソリューションにたどり着きました。
ここで実行できます- -http://jsfiddle.net/WqGph/
しかし、より良い解決策を見つけました-http://jsfiddle.net/XMMc4/5/
<input type = "button" value = "Choose image #2"
onclick ="javascript:document.getElementById('imagefile').click();">
<input id = "imagefile" type="file" style='display:none;' name="img" value="none"/>see jsfiddle code for examples<br/>onchange、非表示input要素に対してイベントがトリガーされないことです。
画像にラベルを付けると、画像をクリックするとボタンのクリックイベントがトリガーされます。通常のボタンを非表示にするだけです。
<form>
<label for="fileButton"><img src="YourSource"></label> <!--You don't have to put an image here, it can be anything you like-->
<input type="file" id="fileButton" style="display:none;"/>
</form>すべてのブラウザで動作し、非常に使いやすいです。
次のように非表示のファイル入力でクリックイベントをディスパッチできます。
<form action="#type your action here" method="POST" enctype="multipart/form-data">
<div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" >Click to upload!</div>
<!-- hide input[type=file]!-->
<div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
<input type="submit" value='submit' >
</form>
<script type="text/javascript">
var btn = document.getElementById("yourBtn");
var upfile = document.getElementById("upfile");
btn.addEventListener('click',function(){
if(document.createEvent){
var ev = document.createEvent('MouseEvents');
ev.initEvent('click',true,false);
upfile.dispatchEvent(ev);
}else{
upfile.click();
}
});
</script>var ev = document.createEvent('HTMLEvents'); HTMLEventsをMouseEventsに変更しますvar ev = document.createEvent('MouseEvents');
これで本当にハックな解決策を...
<style type="text/css">
input[type="file"]
{
width: 80px;
}
</style>
<input id="File1" type="file" />問題は、テキストフィールドを非表示にしている幅属性が、ブラウザ間やWindows XPのテーマ間で明らかに異なるなどです。多分それはあなたが一緒に働くことができる何かですか？...
私はこれが古い投稿であることを知っていますが、テキストを消えさせる簡単な方法は、テキストの色をあなたの背景の色に設定することです。
たとえば、テキスト入力の背景が白の場合：
input[type="file"]{
color:#fff;
}これは、Choose Fileテキストには影響しませんが、ブラウザのために黒のままです。
入力ファイルの幅を85pxに設定したところ、テキストフィールドがまったく表示されなくなりました
このHTMLコードは[ファイルのアップロード]ボタンのみを表示します
<form action="/action_page.php">
<input type="button" id="id" value="Upload File" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file" onchange="this.form.submit()"/>
</form><a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo">
$("#logo").css('opacity','0');
$("#select_logo").click(function(){
$().trigger('click');
return false;
});私にとって、最も簡単な方法は、背景色のようなフォント色を使用することです。シンプルでエレガントではありませんが、便利です。
<div style="color:#FFFFFF"> <!-- if background page is white, of course -->
<input class="fileInput" type="file" name="file1"/></div>これが、すべてのブラウザでこれを行うための最良の方法です。
CSSを忘れて！
<p>Append Image:</p>
<input type="button" id="clickImage" value="Add Image" />
<input type="file" name="images[]" id="images" multiple />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" charset="utf-8"></script>
<script>
$('#images').hide();
$('#clickImage').click( function() {
$('#images').trigger('click');
});
</script>これらの答えはすべてかわいいですが、CSSはすべてのブラウザーとデバイスで同じではないため機能しません。私が書いた最初の回答はSafari以外のすべてで機能します。すべてのブラウザで常に機能するようにするには、動的に作成し、入力テキストをクリアするたびに再作成する必要があります。
var imageDiv = document.createElement("div");
imageDiv.setAttribute("id", "imagediv");
imageDiv.style.cssText = 'position:relative; vertical-align: bottom;';
var imageText = document.createTextNode("Append Image:");
var newLine = document.createElement("br");
var image = document.createElement("input");
image.setAttribute("type", "file");
image.setAttribute("id", "images");
image.setAttribute("name", "images[]");
image.setAttribute("multiple", "multiple");
imageDiv.appendChild(imageText);
imageDiv.appendChild(newLine);
imageDiv.appendChild(image);
questionParagraph.appendChild(imageDiv);ここにはいくつかの有効なオプションがありますが、同様の問題を修正しようとしているときに私が思いついたものをあげようと思いました。 http://jsfiddle.net/5RyrG/1/
<span class="btn fileinput-button">
<span>Import Field(s)</span>
<input id="fileupload" type="file" name="files[]" onchange="handleFiles(this.files)" multiple>
</span>
<div id="txt"></div>
function handleFiles(files){
$('#txt').text(files[0].name);
}私はこれを書いた：
<form action='' method='POST' name='form-upload-image' id='form-upload-image' enctype='multipart/form-data'>
<div style="width: 0; height: 0; overflow: hidden;">
<input type="file" name="input-file" id="input-file" onchange="this.files.length > 0 ? document.getElementById('form-upload-image').submit():null;" />
</div>
</form>
<img src="image.jpg" style="cursor: pointer;" onclick="document.getElementById('input-file').click();" />すべてのブラウザで正常に動作します。jQueryもCSSもありません。
以下は、すべての主要なブラウザで機能する@ampersandreの人気のあるソリューションの簡易バージョンです。Asp.NETマークアップ
<asp:TextBox runat="server" ID="FilePath" CssClass="form-control"
style="float:left; display:inline; margin-right:5px; width:300px"
ReadOnly="True" ClientIDMode="Static" />
<div class="inputWrapper">
<div id="UploadFile" style="height:38px; font-size:16px;
text-align:center">Upload File</div>
<div>
<input name="FileUpload" id="FileInput" runat="server"
type="File" />
</div>
</div>
<asp:Button ID="UploadButton" runat="server"
style="display:none" OnClick="UploadButton_Click" />
</div>
<asp:HiddenField ID="hdnFileName" runat="server" ClientIDMode="Static" />jQueryコード
$(document).ready(function () {
$('#UploadFile').click(function () {
alert('UploadFile clicked');
$('[id$="FileInput"]').trigger('click');
});
$('[id$="FileInput"]').change(function (event) {
var target = event.target;
var tmpFile = target.files[0].name;
alert('FileInput changed:' + tmpFile);
if (tmpFile.length > 0) {
$('#hdnFileName').val(tmpFile);
}
$('[id$="UploadButton"]').trigger('click');
});
});CSSコード
.inputWrapper {
height: 38px;
width: 102px;
overflow: hidden;
position: relative;
padding: 6px 6px;
cursor: pointer;
white-space:nowrap;
/*Using a background color, but you can use a background image to represent
a button*/
background-color: #DEDEDE;
border: 1px solid gray;
border-radius: 4px;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}非表示の「UploadButton」クリックトリガーを標準のサーバーポストバックに使用します。with "Upload File"テキストは、オーバーフローしたときにラッパーdivの入力コントロールをビューの外に押し出すため、 "file input"コントロールdivにスタイルを適用する必要はありません。$（[id $ = "FileInput"]）セレクターは、標準のASP.NETプレフィックスが適用されたIDのセクションを許可します。ファイルがアップロードされると、FilePathテキストボックスの値は、hdnFileName.Valueの後ろのサーバーコードから設定されます。