ファイルのアップロードボタンのスタイルを設定するには

Question

ファイルをアップロードする必要があるファイルアップロードボタンがあります。私は現在いくつかのプリセットスタイルにデフォルト設定しています。

<form class="uploadButton" method="POST" action="upload.php" enctype="multipart/form-data"> 
 
    <input type="file" name="file[]" multiple> 
 
</form>

Answer 1

あなたは以下のコードを試すことができます

$('input[type="file"]').on('change', function() { 
 
    $('input[type="text"]').val($(this).val()); 
 
}); 
 
$('span').on('click', function() { 
 
    $('input[type="text"]').val($('input[type="file"]').val()); 
 
});

form.uploadButton { 
 
    position: relative; 
 
    display: flex; 
 
} 
 

 
input[type="text"] { 
 
    width: 200px; 
 
    height: 40px; 
 
    box-sizing: border-box; 
 
    border-radius: 2px; 
 
    border: 1px solid #ccc; 
 
    margin-right: 5px; 
 
} 
 

 
span { 
 
    background: red; 
 
    border: 0; 
 
    color: #fff; 
 
    padding: 0 20px; 
 
    width: 80px; 
 
    text-align: center; 
 
    line-height: 40px; 
 
    cursor: pointer; 
 
} 
 

 
input[type="file"] { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    opacity: 0; 
 
    cursor: pointer; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="uploadButton" method="" action="" enctype="multipart/form-data"> 
 
    <input type="text"> 
 
    <span>Browse</span> 
 
    <input type="file" name="file[]" multiple> 
 
</form>

Answer 2

ステップ1.単純なHTMLマークアップ

<div class="fileUpload btn btn-primary"> 
    <span>Upload</span> 
    <input type="file" class="upload" /> 
</div> 

ステップを作成します。2. CSS：トリッキーな部分

.fileUpload { 
    position: relative; 
    overflow: hidden; 
    margin: 10px; 
} 

.fileUpload input.upload { 
    position: absolute; 
    top: 0; 
    right: 0; 
    margin: 0; 
    padding: 0; 
    font-size: 20px; 
    cursor: pointer; 
    opacity: 0; 
    filter: alpha(opacity=0); 
} 

Answer 3

input[type="file"] { 
 
    display: none; 
 
} 
 
.custom-file-upload { 
 
    border: 1px solid #ccc; 
 
    display: inline-block; 
 
    padding: 6px 12px; 
 
    cursor: pointer; 
 
}

<form class="uploadButton" method="POST" action="upload.php" enctype="multipart/form-data"> 
 
    <label for="file-upload" class="custom-file-upload"> 
 
    <i class="fa fa-cloud-upload"></i> Custom Upload 
 
    </label> 
 
    <input id="file-upload" type="file" name="file[]" multiple/> 
 
</form>

Answer 4

これを試してみてください。

'use strict'; 
 

 
;(function (document, window, index) 
 
{ 
 
    var inputs = document.querySelectorAll('.inputfile'); 
 
    Array.prototype.forEach.call(inputs, function(input) 
 
    { 
 
    var label = input.nextElementSibling, 
 
    labelVal = label.innerHTML; 
 

 
    input.addEventListener('change', function(e) 
 
    { 
 
     var fileName = ''; 
 
     if(this.files && this.files.length > 1) 
 
     fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length); 
 
     else 
 
     fileName = e.target.value.split('\\').pop(); 
 

 
     if(fileName) 
 
     label.querySelector('span').innerHTML = fileName; 
 
     else 
 
     label.innerHTML = labelVal; 
 
    }); 
 

 
    // Firefox bug fix 
 
    input.addEventListener('focus', function(){ input.classList.add('has-focus'); }); 
 
    input.addEventListener('blur', function(){ input.classList.remove('has-focus'); }); 
 
    }); 
 
}(document, window, 0));

input[type="file"] { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 1px; 
 
    cursor: pointer; 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); 
 
} 
 

 
.inputfile + label span { 
 
    width: 200px; 
 
    min-height: 18px; 
 
    display: inline-block; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    vertical-align: top; 
 
    border: 1px solid #ccc; 
 
} 
 

 
.inputfile + label strong { 
 
    height: 100%; 
 
    color: #fff; 
 
    background-color: #d3394c; 
 
    display: inline-block; 
 
} 
 

 
.inputfile + label span, 
 
.inputfile + label strong { 
 
    padding: 10px; 
 
} 
 
.inputfile + label svg { 
 
    width: 1em; 
 
    height: 1em; 
 
    vertical-align: middle; 
 
    fill: currentColor; 
 
    margin-top: -0.25em; 
 
    margin-right: 0.25em; 
 
} 
 

 
.box { 
 
    position: relative; 
 
}

<div class="box"> 
 
    <input type="file" name="file" id="file" class="inputfile" data-multiple-caption="{count} files selected" multiple /> 
 
    <label for="file"><span></span> <strong><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> Choose a file&hellip;</strong></label> 
 
</div>

Answer 5

このような何かを試してみてください。

document.getElementById("file-upload").addEventListener("change", function() { 
 
var fullPath = document.getElementById("file-upload").value 
 
var filename = fullPath.replace(/^.*[\\\/]/, '') 
 
    document.getElementById("status").innerHTML = filename; 
 
});

.file-upload { 
 
    opacity: 0; 
 
    position: absolute; 
 
    top:0; 
 
    left:0; 
 
    height:75px; 
 
    width:100%; 
 
    border: 1px solid red; 
 
} 
 
.file-container { 
 
    position:relative; 
 
} 
 
.custom-file-upload { 
 
    position: absolute; 
 
    top:0; 
 
    left:0; 
 
} 
 
#status { 
 
    font-size: 25px; 
 
    color:red; 
 
    font-weight: bold; 
 
}

<div class="file-container"> 
 
    <div class="custom-file-upload"> 
 
    Put fancy <img src="https://cdn3.iconfinder.com/data/icons/badger-s-christmas/300/stocking-32.png" /> stuff here <img src="https://cdn3.iconfinder.com/data/icons/badger-s-christmas/300/bells-48.png" /> (click me) 
 
    <input type="file" class="file-upload" id="file-upload" /> 
 
    </div> 
 
</div><br /><br /><br /><p id="status"></p>

Answer 6

function myFunction(){ 
 
    var x = document.getElementById("myFile"); 
 
    var txt = ""; 
 
    if ('files' in x) { 
 
     if (x.files.length == 0) { 
 
      txt = ""; 
 
     } else { 
 
      for (var i = 0; i < x.files.length; i++) { 
 
       txt += "<br><strong>" + (i+1) + ". file</strong><br>"; 
 
       var file = x.files[i]; 
 
       if ('name' in file) { 
 
        txt += "Name: " + file.name + "<br>"; 
 
       } 
 
       if ('size' in file) { 
 
        txt += "Size: " + file.size + " bytes <br>"; 
 
       } 
 
      } 
 
     } 
 
    } 
 
    else { 
 
     if (x.value == "") { 
 
      txt += "Select one or more files."; 
 
     } else { 
 
      txt += "The files property is not supported by your browser!"; 
 
      txt += "<br>The path of the selected file: " + x.value; // If the browser does not support the files property, it will return the path of the selected file instead. 
 
     } 
 
    } 
 
    document.getElementById("demo").innerHTML = txt; 
 
}

.custom-file-upload { 
 
    border: 1px solid #ccc; 
 
    display: inline-block; 
 
    padding: 6px 12px; 
 
    cursor: pointer; 
 
}

<body onload="myFunction()"> 
 
    <input type="file" id="myFile" class="custom-file-upload" multiple size="50" onchange="myFunction()"> 
 
    <p id="demo"></p> 
 
</body>

Answer 7

function myFunction(){ 
 
    var x = document.getElementById("myFile"); 
 
    var txt = ""; 
 
    if ('files' in x) { 
 
     if (x.files.length == 0) { 
 
      txt = ""; 
 
     } else { 
 
      for (var i = 0; i < x.files.length; i++) { 
 
       txt += "<br><strong>" + (i+1) + ". file</strong><br>"; 
 
       var file = x.files[i]; 
 
       if ('name' in file) { 
 
        txt += "Name: " + file.name + "<br>"; 
 
       } 
 
       if ('size' in file) { 
 
        txt += "Size: " + file.size + " bytes <br>"; 
 
       } 
 
      } 
 
     } 
 
    } 
 
    else { 
 
     if (x.value == "") { 
 
      txt += "Select one or more files."; 
 
     } else { 
 
      txt += "The files property is not supported by your browser!"; 
 
      txt += "<br>The path of the selected file: " + x.value; // If the browser does not support the files property, it will return the path of the selected file instead. 
 
     } 
 
    } 
 
    document.getElementById("demo").innerHTML = txt; 
 
}

.custom-file-upload { 
 
    border: 1px solid #ccc; 
 
    display: inline-block; 
 
    padding: 6px 12px; 
 
    cursor: pointer; 
 
} 
 
::-webkit-file-upload-button { 
 
    background: black; 
 
    color: red; 
 
    padding: 0.5em; 
 
}

<body onload="myFunction()"> 
 
    <input type="file" id="myFile" class="custom-file-upload" multiple size="50" onchange="myFunction()"> 
 
    <p id="demo"></p> 
 
</body>