入力type = fileを画像で置き換える

96

多くの人のように、私は醜いをカスタマイズしたいと思いますinput type=file、そしてそれはいくつかのハックやなしではそれができないことを知っていますjavascript。しかし、私の場合、ファイルのアップロードボタンは画像（jpeg | jpg | png | gif）をアップロードするためだけのものなのでclickable、入力タイプのファイル（「ダイアログボックスを表示し、送信されたページに同じ$ _FILEを入力します）。
私はここにいくつかの回避策を見つけました、そしてこれも興味深いものです（しかしChrome = /では動作しません）。

ファイルボタンにスタイルを追加したいときはどうしますか？あなたがそれについて何らかの見解を持っているなら、ただ答えボタンを押してください;）

css  image  file  button  input 
— ニコラ
ソース
2
ここに着陸するすべての人にとって、tympanus.net / codrops / 2015/09/15 /…も一見の価値があるかもしれません。（形、形を問わず、このサイトとは提携していません。）
— CBroe
— cнŝdk

回答:

276

これは私にとって本当にうまくいきます：

.image-upload>input {
  display: none;
}
<div class="image-upload">
  <label for="file-input">
    <img src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg"/>
  </label>

  <input id="file-input" type="file" />
</div>
スニペットを展開

基本的に、ラベルのfor属性は、ラベルをクリックすることが、指定された入力をクリックすることと同じになるようにします。

また、displayプロパティをnoneに設定すると、ファイル入力がまったくレンダリングされないため、きれいに表示されます。

Chromeでテスト済みですが、ウェブによれば、すべての主要なブラウザで動作するはずです。:)

編集： ここにJSFiddleを追加しました：https：//jsfiddle.net/c5s42vdz/

— ハードセッティング
ソース
人々がまだそれを「主要なブラウザ」と見なしているかどうかはわかりませんが、これはIE7では機能しないようです
— Hoppe
@ChetそれはSafari（7+）の最新バージョンで動作しているようですどのバージョンを使用していますか？
— 14
1
@Toto私にとってIE11で動作しているので、JSFiddleを追加して、確認できるようにしました。
— 15年
@hardsettingあなたは正しいです！申し訳ありません（たぶん私は別のドキュメントモード（ie8以下）でした）
— Toto
2
申し訳ありませんが、このコードはファイル名または少なくともファイルが正常に選択されたことを示すメッセージで更新する必要があると思います。ユーザーは、ファイルを選択した後に何が起こったのかを視覚的に入力できません。これはできますか？ファイルが選択されたときに、おそらく別の画像に変更しますか？
— JoaMika
66

実際にはそれは純粋なCSSで行うことができ、それは非常に簡単です...

HTMLコード

<label class="filebutton">
Browse For File!
<span><input type="file" id="myfile" name="myfile"></span>
</label>

CSSスタイル 

label.filebutton {
    width:120px;
    height:40px;
    overflow:hidden;
    position:relative;
    background-color:#ccc;
}

label span input {
    z-index: 999;
    line-height: 0;
    font-size: 50px;
    position: absolute;
    top: -2px;
    left: -700px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -ms-filter: "alpha(opacity=0)";
    cursor: pointer;
    _cursor: hand;
    margin: 0;
    padding:0;
}

アイデアは、絶対にラベルの内側に入力を配置することです。入力のフォントサイズを大きい値に設定すると、「参照」ボタンのサイズが大きくなります。次に、左/上負のプロパティを使用して試行錯誤を繰り返し、入力参照ボタンをラベルの後ろに配置します。

ボタンを配置するときは、アルファを1に設定します。終了したら、0に戻します（これにより、何をしているのかがわかります）。

すべてのブラウザーでテストを行ってください。すべてのブラウザーで入力ボタンのサイズが少し異なります。

— メレス
ソース
トビーのおかげで、なぜ「左：-700px;」があるのですか。？Firefoxでは、ファイル入力フィールドは実際にはページの左側に浮かんでいます...ラベルスパンに固執していません...「左：-700px;」を削除すると
— 正常
+1ありがとう、@ Sloin left：-700px参照ボタンをボタンの上に置いて、カーソルがテキストカーソルではなくポインタになるようにしたかったためです。
— Caleb Doucet 2012
14

@hardsettingによる素晴らしい解決策ですが、WindowsでSafari（5.1.7）と連携するようにいくつかの改善を行いました

.image-upload > input {
  visibility:hidden;
  width:0;
  height:0
}
<div class="image-upload">
  <label for="file-input">
    <img src="https://placehold.it/100/000000/ffffff?text=UPLOAD" style="pointer-events: none"/>
  </label>

  <input id="file-input" type="file" />
</div>
スニペットを展開

サファリの問題のvisibility: hidden, width:0代わりに使用し、入力ファイルタイプのタグがFORMタグにある場合に機能するようにタグにdisplay: none追加pointer-events: noneしましたimg。

すべての主要なブラウザで私のために働いているようです。

それが誰かを助けることを願っています。

— リシ
ソース
参照ファイルを開くために、style = "pointer-events：none"を追加する必要はありません。
— SantoshK 2018
5

SWFUploadまたはUploadifyを使用します。彼らはフラッシュを必要としますが、問題なくあなたが望むすべてを行います。

任意の<input type="file">試行が実際のコントロールをクリックする以外の方法で「ファイルを開く」ダイアログをトリガすることに基づいて、この問題を回避するには、いつでも、セキュリティ上の理由から、ブラウザから除去することができました。（FFとIEの現在のバージョンでは、プログラムでそのイベントをトリガーすることはもう不可能だと思います。）

— ペッカ
ソース
おかげで、私もそれらの周りを見てきましたが、どちらもFlash Playerが動作する必要があり、ユーザーに別の必須レイヤーを追加したくないと思います。さらに、入力ファイルのデータとまったく同じタイプのデータを送信することを確信していますか？送信ページで実行したすべてのPHPを再テストしたくありません。乾杯。
— Nicolas
@nikoいいえ、動作は異なります。フォーム要素ではありませんが、ファイルを受信スクリプトに独自に送信するため、スクリプトのワークフローを変更する必要があります。それが選択肢でなければ、あなたがリンクしている投稿でショーン・インマンがしたよりもうまくやることはできないと思います...
— Pekka
私は恐れているので、それは本当に残念です。将来のCSS実装ではそれについて何かありませんか？とにかく返信をありがとう:)
— ニコラス
@nikoどういたしまして。CSSについてのよい質問-実際はわかりませんが、HTML 5は新しいことをここにもたらすでしょう。たとえば、appelsiini.net / 2009/10 / html5-drag-and-drop-multiple-file-uploadを確認してください。
— ペッカ
ええ、デモappelsiini.net/demo/html5_upload/demo.htmlがFF 3.6.3で表示されなくても期待できるようですが、とにかくFF 3.6.xが必要だと言っています。現在のHTML / CSS / Javscript（フラッシュなし）では、何ができるのですか？いくつかのフォントと「色」のカスタマイズ？私はその時ですか？乾杯。
— Nicolas
5

これは私があなたのポイントを得たら私の方法です

HTML

<label for="FileInput">
    <img src="tools/img/upload2.png" style="cursor:pointer" onmouseover="this.src='tools/img/upload.png'" onmouseout="this.src='tools/img/upload2.png'" alt="Injaz Msila" style="float:right;margin:7px" />
</label>
<form action="upload.php">
    <input type="file" id="FileInput" style="cursor: pointer;  display: none"/>
    <input type="submit" id="Up" style="display: none;" />
</form>

jQuery

<script type="text/javascript">
    $( "#FileInput" ).change(function() {
      $( "#Up" ).click();
    });
</script>
— SystemDZ
ソース
3

あなたはこれを試すことができる本当に簡単です：

$("#image id").click(function(){
    $("#input id").click();
});
— ジクサス
ソース
2

代わりに画像を配置して、次のようにすることができます。

HTML：

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

jQuery：

$("#upfile1").click(function () {
    $("#file1").trigger('click');
});

警告：IE9とIE10では、JavaScriptを介してファイル入力でonclickをトリガーすると、フォームは「危険」としてフラグが付けられ、JavaScriptで送信できないため、従来どおり送信できるかどうかは不明です。

— ParPar
ソース
2 

        form input[type="file"] {
          display: none;
        }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
  <title>Simple File Upload</title>
  <meta name="" content="">
</head>

<body>
  <form action="upload.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <label for="fileToUpload">
      <img src="http://s3.postimg.org/mjzvuzi5b/uploader_image.png" />
    </label>
    <input type="File" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
  </form>
</body>

</html>
スニペットを展開

スニペットを実行するか、上記のコードをコピーして実行します。あなたはあなたが望んだものを手に入れます。JavaScriptがなくても非常にシンプルで効果的です。楽しい！！！

— 新皮質
ソース
悲しいことに、これらの方法は私にとってSafariで機能しません:(
— czLukasss 2015
1

入力自体は、CSS visibility：hiddenで非表示になっています。

アンカーや画像をクリックすると、非表示の入力フィールドがクリックされ、ファイルを選択するためのダイアログボックスが表示されます。

編集：実際にはChromeとSafariで機能しますが、FF4Betaではそうではないことに気付きました

— ペトルノフ
ソース
1

作業コード：

入力部分を非表示にして、このようにします。

<div class="ImageUpload">
   <label for="FileInput">
      <img src="../../img/Upload_Panel.png" style="width: 18px; margin-top: -316px; margin-left: 900px;"/>
   </label>

  <input id="FileInput" type="file" onchange="readURL(this,'Picture')" style="cursor: pointer;  display: none"/>
</div>
— user3400389
ソース
1

過去10年間、隠された入力や目に見えない入力に関する多くの問題がありました。

IE 5、6、7、8、9で不透明度をサポートしないことを少し望んでいたため、ファイル入力がアップロード画像をカバーするようになりましたが、次のcssコードで問題が解決しました。

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);

次の抜粋はクロムでテストされています。IE5、6、7、8、9、10 IE 5の唯一の問題は、自動マージンをサポートしていないことです。

スニペットを実行するだけで、CSSとHTMLをコピーして貼り付け、必要に応じてサイズを変更します。

.file-upload{
	height:100px;
	width:100px;
	margin:40px auto;
	border:1px solid #f0c0d0;
	border-radius:100px;
	overflow:hidden;
	position:relative;
}
.file-upload input{
	position:absolute;
	height:400px;
	width:400px;
	left:-200px;
	top:-200px;
	background:transparent;
	opacity:0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);  
}
.file-upload img{
	height:70px;
	width:70px;
	margin:15px;
}
<div class="file-upload">
<!--place upload image/icon first !-->
<img src="https://i.stack.imgur.com/dy62M.png" />
<!--place input file last !-->
<input type="file" name="somename" />
</div>
スニペットを展開

— codedudey
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.