web-dev-qa-db-ja.com

画像アップロード用のファイルボタンをカスタマイズする

画像ファイルをアップロードするためのボタンが配置されています。そのボタンをカスタマイズしたい、複数の画像ファイルを追加したい、実現するロジックは何ですか。

<input type="file" />,this is rendering a choose button with a text saying `no files choosen` in the same line.

テキスト「no files choosen "chooseボタンの下。平均して、カメラ画像をno files choosenテキスト。

これを実行してサイトを改善する方法。

ありがとう

javascriptjqueryhtmlcsshtml5
13
user2161650

入力を非表示にするには、height:0pxおよびoverwflow:hidden。ボタンまたはその他のHTML要素を追加してから、必要に応じてスタイルを設定できます。 onclickイベントで、javascriptまたはjQueryを使用して入力フィールドを取得し、クリックします。

<div style="height:0px;overflow:hidden">
   <input type="file" id="fileInput" name="fileInput" />
</div>
<button type="button" onclick="chooseFile();">choose file</button>

<script>
   function chooseFile() {
      $("#fileInput").click();
   }
</script>

これで入力は非表示になりましたが、必要に応じてボタンのスタイルを設定でき、クリックすると常にファイル入力が開きます。

JQueryを使用したくない場合は、スクリプトタグを次のスクリプトタグに置き換えます。

<script>
   function chooseFile() {
      document.getElementById("fileInput").click();
   }
</script>
45
Sébastien Garmier

この操作されたソリューションを試してください。 （今日、私のプロジェクトの1つで試してみました:)）

[〜＃〜] html [〜＃〜]

  <div class="choose_file">
        <span>Choose File</span>
        <input name="Select File" type="file" />
    </div>

[〜＃〜] css [〜＃〜]

.choose_file{
    position:relative;
    display:inline-block;    
    border-radius:8px;
    border:#ebebeb solid 1px;
    width:250px; 
    padding: 4px 6px 4px 8px;
    font: normal 14px Myriad Pro, Verdana, Geneva, sans-serif;
    color: #7f7f7f;
    margin-top: 2px;
    background:white
}
.choose_file input[type="file"]{
    -webkit-appearance:none; 
    position:absolute;
    top:0; left:0;
    opacity:0; 
}

[〜＃〜] demo [〜＃〜]

7
Sowmya

CSSのみを使用してカスタマイズできます。以下のリンクをご覧ください。

HTML

<label class="btn-upload">
   <input type="file" name="fileupload">
   <button class="btn">Browse</button>
</label>

.btn-upload {
    position: relative;
    overflow: hidden;
    display: inline-block;
}
.btn-upload input[type=file] {
    position: absolute;
    opacity: 0;
    z-index: 0;
    max-width: 100%;
    height: 100%;
    display: block;
}
.btn-upload .btn{
    padding: 8px 20px;
    background: #337ab7;
    border: 1px solid #2e6da4;
    color: #fff;
    border: 0;
}
.btn-upload:hover .btn{
    padding: 8px 20px;
    background: #2e6da4;
    color: #fff;
    border: 0;
}

http://imdebasispanda.blogspot.in/2015/08/custom-upload-button-using-css.html

1
Debasis Panda
    <body>

    <style>
   .image{
  position:relative;
   display:inline-block;    
     width:3%; 
   padding: 0%;
    }
.image input[type="file"]{
-webkit-appearance:none; 
position:absolute;
    top:0; left:0;
    opacity:0; 
     }
   </style>

  <div class="image">
    <span><img src='admin/ico/fms.ico' class "image"></span>
    <input name="image" type="file" />
  </div>
</body>
0
J.Mbai