web-dev-qa-db-ja.com

CSS3 / Javascriptで「入力ファイル」をスタイルするには？

スタイルを付けたい<input type="file" /> CSS3を使用します。

または、ユーザーがdiv（スタイルを設定する）を押すと、[参照]ウィンドウが開きます。

HTML、CSS3、およびJavascript/jQueryのみを使用してそれを行うことは可能ですか？

javascriptjqueryhtmlcss3file-io
35
Misha Moroshko

このおおまかな例がありますので、いくつかのアイデアを得たいと思うかもしれません...

html

<div id="file">Chose file</div>
<input type="file" name="file" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

#file {
    display:none;
}​

jQuery

var wrapper = $('<div/>').css({height:0,width:0,'overflow':'hidden'});
var fileInput = $(':file').wrap(wrapper);

fileInput.change(function(){
    $this = $(this);
    $('#file').text($this.val());
})

$('#file').click(function(){
    fileInput.click();
}).show();

デモ

51
Reigel

Reigelsのアイデアと this one を確認した後、type="file"入力フィールドのスタイル設定に関する一般的な問題に対するこの簡単なソリューションを作成しました（Firefox、Safari、Chromeでテストしました）。

<div style="position:relative;">
<div id="file" style="position:absolute;">Click here to select a file</div>
<input type="file" name="file" style="opacity:0; z-index:1;" onchange="document.getElementById('file').innerHTML = this.value;">
</div>

次に、必要に応じて「ファイル」divのスタイルを設定できます。

Divの代わりにtype="text"入力を使用する場合は、innerHTMLのvalueを変更するだけです。

<div style="position:relative;">
<input type="text" id="file" style="position:absolute;" placeholder="Click here to select a file">
<input type="file" name="file" style="opacity:0; z-index:1;" onchange="document.getElementById('file').value = this.value;">
</div>

JQueryを使用した元の答えは次のとおりです。

<div style="position:relative;">
<div id="file" style="position:absolute;">Click here to select a file</div>
<input type="file" name="file" style="opacity:0; z-index:1;" onchange="$('#file').text($(this).val());">
</div>
19
Sophivorus

HTML、CSS、およびJavascriptを使用して（フレームワークなしで）実行する方法は次のとおりです。

アイデアは、<input type='file'>ボタンを非表示にし、ダミー<div>ファイルアップロードボタンとしてスタイルを設定します。この<div>、非表示の<input type='file'>。

デモ：

// comments inline

document.getElementById("customButton").addEventListener("click", function(){
  document.getElementById("fileUpload").click();  // trigger the click of actual file upload button
});

document.getElementById("fileUpload").addEventListener("change", function(){
  var fullPath = document.getElementById('fileUpload').value;
  var fileName = fullPath.split(/(\\|\/)/g).pop();  // fetch the file name
  document.getElementById("fileName").innerHTML = fileName;  // display the file name
}, false);
body{
  font-family: Arial;
}

#fileUpload{
  display: none; /* do not display the actual file upload button */
}

#customButton{  /* style the dummy upload button */
  background: yellow;
  border: 1px solid red;
  border-radius: 5px;
  padding: 5px;
  display: inline-block;
  cursor: pointer;
  color: red;
}
<input type="file" id="fileUpload"> <!-- actual file upload button -->
<div id="customButton">Browse</div>  <!-- dummy file upload button which can be used for styling ;) -->
<span id="fileName"></span> <!-- the file name of the selected file will be shown here -->
6
Rahul Desai

これもカスタムスタイルを作成しました。見てみな

JS Fiddle Demo-Custom Input type = "file"

[〜＃〜] html [〜＃〜]

<input type="file" id="test">
<div class="button-group"> 
<a href="#" id="browse" class="button primary">Browse</a>
<a href="#" id="save" class="button">Save</a>
<a href="#" id="clear" class="button danger">Clear</a>
</div>
<input type="text" id="testfile"></input>

[〜＃〜] css [〜＃〜]

body {
padding:100px;
}
input[type="file"] {
position:absolute;
display:none;
}
#testfile {
height: 26px;
text-decoration: none;
background-color: #eee;
border:1px solid #ccc;
border-radius:3px;
float:left;
margin-right:5px;
overflow:hidden;
text-overflow:Ellipsis;
color:#aaa;
text-indent:5px;
}
#actionbtnBrowse, #actionbtnSave {
margin:0 !important;
width:60px;
}

JQuery

$("#browse").click(function () {
$("#test").click();
})

$("#save").click(function () {
alert('Run a save function');
})

$("#clear").click(function () {
$('#testfile').val('');
})

$('#test').change(function () {
$('#testfile').val($(this).val());
})

また、外部リソースタブに追加します：

https://github.com/necolas/css3-github-buttons/blob/master/gh-buttons.css

6
andibra

偽のdivは必要ありません！No Js no extra html。 cssのみを使用できます。

最良の方法は、de入力を明示する要素として疑似要素：afterまたは：beforeを使用することです。次に、必要に応じてその擬似要素をスタイルします。次のように、すべての入力ファイルの一般的なスタイルとして行うことをお勧めします。

input[type="file"]:before {
  content: 'Browse';
  background: #FFF;
  width: 100%;
  height: 35px;
  display: block;
  text-align: left;
  position: relative;
  margin: 0;
  margin: 0 5px;
  left: -6px;
  border: 1px solid #E0E0E0;
  top: -1px;
  line-height: 35px;
  color: #B6B6B6;
  padding-left: 5px;
  display: block;
}

-> [〜＃〜] demo [〜＃〜]

4
Despertaweb

Reigelに加えて、

より簡単な実装です。このソリューションは、複数のファイル入力フィールドでも使用できます。これが一部の人々に役立つことを願っています;-)

HTML（単一入力）

<input type="file" name="file" />

HTML（複数入力）

<!-- div is important to separate correctly or work with jQuery's .closest() -->
<div>
  <input type="file" name="file[]" />
</div>

<div>
  <input type="file" name="file[]" />
</div>

<div>
  <input type="file" name="file[]" />
</div>

JavaScript

// make all input fields with type 'file' invisible
$(':file').css({
  'visibility': 'hidden',
  'display': 'none'
});

// add a textbox after *each* file input
$(':file').after('<input type="text" readonly="readonly" value="" class="fileChooserText" /> <input type="button" value="Choose file ..." class="fileChooserButton" />');

// add *click* event to *each* pseudo file button
// to link the click to the *closest* original file input
$('.fileChooserButton').click(function() {
    $(this).parent().find(':file').click();
}).show();

// add *change* event to *each* file input
// to copy the name of the file in the read-only text input field
$(':file').change(function() {
    $(this).parent().find('.fileChooserText').val($(this).val());
});
4
Patrick Hillert

今日も同じ問題に遭遇しましたが、独自のスタイルを持つ簡単な方法があるようです-入力を非表示にし、関連するラベルをスタイルします：

<div class="upload">
  <label for="my-input"> Upload stuff </label>
  <input type="file" id="my-input" name="files[]" />
</div>

CSS：

.upload input{
  display: none;
}

.upload label{
  background: DarkSlateBlue;
  color: white;
  padding: 5px 10px;
}

最新のChrome、FirefoxおよびIE 10.で動作します。他の人はテストしませんでした

2
nice ass

Reigelの答えはアイデアを伝えていますが、実際にはスタイルが付加されていません。最近この問題に遭遇しましたが、Stack Overflowの答えが多すぎたにも関わらず、実際に法案に当てはまるものはありませんでした。結局、私はこれをカスタマイズして、シンプルでエレガントなソリューションを手に入れました。

Firefoxでもこれをテストしました。IE（11、10＆9）、Chrome and Opera、iPad and some Androidデバイス。

ここにJSFiddleリンクがあります-> http://jsfiddle.net/umhva747/

$('input[type=file]').change(function(e) {
    $in = $(this);
    $in.next().html($in.val());
    
});

$('.uploadButton').click(function() {
    var fileName = $("#fileUpload").val();
    if (fileName) {
        alert(fileName + " can be uploaded.");
    }
    else {
        alert("Please select a file to upload");
    }
});
body {
    background-color:Black;
}

div.upload {
    background-color:#fff;
    border: 1px solid #ddd;
    border-radius:5px;
    display:inline-block;
    height: 30px;
    padding:3px 40px 3px 3px;
    position:relative;
    width: auto;
}

div.upload:hover {
    opacity:0.95;
}

div.upload input[type="file"] {
    display: input-block;
    width: 100%;
    height: 30px;
    opacity: 0;
    cursor:pointer;
    position:absolute;
    left:0;
}
.uploadButton {
    background-color: #425F9C;
    border: none;
    border-radius: 3px;
    color: #FFF;
    cursor:pointer;
    display: inline-block;
    height: 30px;
    margin-right:15px;
    width: auto;
    padding:0 20px;
    box-sizing: content-box;
}

.fileName {
    font-family: Arial;
    font-size:14px;
}

.upload + .uploadButton {
    height:38px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
    <div class="upload">
        <input type="button" class="uploadButton" value="Browse" />
        <input type="file" name="upload" accept="image/*" id="fileUpload" />
        <span class="fileName">Select file..</span>
    </div>
    <input type="button" class="uploadButton" value="Upload File" />
</form>

お役に立てれば！！！

2
Satwik Nadkarny

JQueryを使用する私が使用している例は次のとおりです。Firefox11、およびChrome 18、およびIE9に対してテストしました。これら3つでのみ動作します。

HTML

基本的な「カスタマイズ可能な」HTML構造を次に示します。

<span>
    File to Upload<br />
    <label class="smallInput" style="float:left;">
        <input type="file" name="file" class="smallInput" />
    </label>
    <input type="button" class="upload" value="Upload" style="float:left;margin-top:6px;margin-left:10px;" />
</span>

CSS

これが私のCSSのサンプルです

label.smallInput {
    background:url(images/bg_s_input.gif) no-repeat;
    width:168px;
}

JavaScript

これは重いリフターです。

/* File upload magic form?? */
$("input.smallInput[type=file]").each(function(i){
    var id      = "__d_file_upload_"+i;
    var d_wrap  = $('<div/>').attr('id',id).css({'position':'relative','cursor':'text'});

    $(this).wrap(d_wrap).bind('change blur focus keyup click',function(){
        $("#"+id+" input[type=text]").val($(this).val());
    }).css({'opacity':0,'zIndex':9999,'position':'absolute'}).removeClass('smallInput');

    obj = $(this);

    $("#"+id).append($("<input/>").addClass('smallInput').attr('type','text').css({'zIndex':9998,'position':'absolute'}).bind('click',function(e){obj.trigger('click');$(this).blur();}));
    obj.closest('span').children('input.upload[type=button]').bind('click',function(e){
        obj.trigger('click');
        $(this).blur();
    });
});
/* ************************ */

説明

HTMLは非常に単純で、単純な要素です。ボタンを含めると、他のボタンから独立して名前を付けることができます。これはJavaScriptに含めることができますが、簡単に言えば、私は怠け者です。コードは、すべてのinputsを検索します-smallInputのクラスを持つtype of fileこれにより、デフォルトのHTMLおよびフォールバックフォーム構造を定義できますブラウザが苦痛であると判断した場合。

このメソッドはJavaScriptを使用して配信を保証するだけで、ファイル入力に関するブラウザの動作を変更しません。

HTMLとJavaScriptを変更して非常に堅牢にすることができます。このコードで現在のプロジェクトで十分なので、変更を加えることはできません。

注意事項

  • ブラウザーごとにファイル入力の値の扱いが異なります。chromeでは、Windowsマシンではc：\ fakeroot \になります。
  • （優れたWordがないため）匿名関数を使用します。これは、ファイル入力が多すぎる場合、処理時にブラウザの動作が遅くなる可能性があることを意味します。
2
Destreyf

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

[〜＃〜] html [〜＃〜]

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

ユーザーがサーバー上のファイルコピーの（相対）パス名（承認されている場合）を入力するテキストフィールドと、ファイルのローカルシステムを参照してフォームを送信する送信ボタンを備えたソリューションを次に示します。

<form enctype="multipart/form-data" action="" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
<p><input type="file" name="upload_file" id="upload_file" size="40"/></p>
<p><input type="text" id="upload_filename" name="upload_filename" size="30" maxlength="100" value="<?php echo htmlspecialchars($filename, ENT_COMPAT, 'UTF-8'); ?>"/>
<input type="submit" class="submit submit_upload" id="upload_upload" name="upload_upload" value="Upload"/></p>
</form>

スクリプティングパーツはファイル入力を非表示にし、ユーザーが送信ボタンをクリックするとクリックし、ユーザーがファイルを選択した場合はフォームを送信します。ユーザーがファイル名を入力せずにファイルをアップロードしようとすると、最初にファイル名のテキストフィールドにフォーカスが移動します。

<script type="text/javascript">
var file=$('#upload_file');
var filename=$('#upload_filename');
var upload=$('#upload_upload');

file.hide().change(function() {if (file.val()) {upload.unbind('click').click();}});

upload.click(function(event) {event.preventDefault();if (!filename.val()) {filename.focus();} else {file.click();}});
</script>

完璧な結果を得るために送信ボタンのスタイルを設定するだけです：

.submit {padding:0;margin:0;border:none;vertical-align:middle;text-indent:-1000em;cursor:pointer;}
.submit_upload {width:100px;height:30px;background:transparent url(../images/theme/upload.png) no-repeat;}
1
frasq