web-dev-qa-db-ja.com

入力type = fileを画像に置き換えます

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

ファイルボタンにスタイルを追加する場合はどうしますか？あなたはそれについて何か意見がある場合は、単に答えボタンを押してください;）

cssimagefilebuttoninput
85
Nicolas

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

.image-upload>input {
  display: none;
}
<div class="image-upload">
  <label for="file-input">
    <img src="placeholder.jpg"/>
  </label>

  <input id="file-input" type="file" />
</div>

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

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

Chromeでテストされていますが、Webによれば、すべての主要なブラウザーで動作するはずです。 :)

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

234
hardsetting

実際には、純粋な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に設定し直します（これで、何をしているかがわかります！）

ブラウザーはすべて入力ボタンをわずかに異なるサイズでレンダリングするため、ブラウザー間で必ずテストしてください。

ここに例を見ることができます（[トラックを追加]ボタン）： http://rakmastering.com/upload/

62
user210437

@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の代わりにdisplay: noneを使用し、imgタグにpointer-events: noneを追加して、入力ファイルタイプタグがFORMタグにある場合に機能するようにしました。

すべての主要なブラウザで動作しているようです。

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

12
rishi

私はあなたのポイントを得た場合、これは私の方法です

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>
4
SystemDZ

SWFUpload または ploadify を使用します。 Flashが必要ですが、問題なくすべてを実行します。

実際のコントロールをクリックする以外の方法で「ファイルを開く」ダイアログをトリガーしようとする<input type="file">ベースの回避策は、セキュリティ上の理由からいつでもブラウザから削除できます。 （FFおよびIEの現在のバージョンでは、Ithink、プログラムでそのイベントをトリガーすることはできません。）

4
Pekka 웃

これは本当に簡単です：

$("#image id").click(function(){
    $("#input id").click();
});
2
Zicsus

代わりに画像を配置して、次のように実行できます。

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を使用してサブミットできません。

1
ParPar
        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>

SNIPPETを実行するか、上記のコードをコピーして実行します。必要なものが得られます。JavaScriptを使用しなくても非常にシンプルで効果的です。お楽しみください!!!

1
Neocortex

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

その後、どの要素でもアンカーまたは画像を使用できます。アンカー/画像をクリックすると、非表示の入力フィールドをクリックします-ファイルを選択するためのダイアログボックスが表示されます。

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

0
Petrunov

作業コード：

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

<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>
0
user3400389