如何定制<input type="file"> ?
[英]How to customize <input type="file">?
問題描述
是否可以更改<input type="file">的外觀？
18 個解決方案
解決方案1
271 已采納 2011-04-28 03:46:55
您不能對input[type=file]控件本身進行太多修改。
由於單擊與輸入正確配對的label元素將激活/聚焦它，我們可以使用label來觸發操作系統瀏覽對話框。
這里是你如何做到的……
label { cursor: pointer; /* Style as you please, it will become the visible UI component. */ } #upload-photo { opacity: 0; position: absolute; z-index: -1; }
<label for="upload-photo">Browse...</label> <input type="file" name="photo" id="upload-photo" />
表單控件的 CSS 將使它看起來不可見並且不占用文檔布局中的空間，但仍然存在，因此可以通過label激活它。
如果您想在選擇后顯示用戶選擇的路徑，您可以使用 JavaScript 偵聽change事件，然后讀取瀏覽器為您提供的路徑（出於安全原因，它可能會向您謊報確切的路徑）。 使最終用戶看起來更漂亮的一種方法是簡單地使用返回的路徑的基本名稱（因此用戶只需看到選擇的文件名）。
Tympanos 有一個很棒的指南來設計這個。
解決方案2
34 2013-05-07 13:30:33
可能是這樣的嗎？
<form>
<input id="fileinput" type="file" style="display:none;"/>
</form>
<button id="falseinput">El Cucaratcha, for example</button>
<span id="selected_filename">No file selected</span>
<script>
$(document).ready( function() {
$('#falseinput').click(function(){
$("#fileinput").click();
});
});
$('#fileinput').change(function() {
$('#selected_filename').text($('#fileinput')[0].files[0].name);
});
</script>
解決方案3
25 2014-07-01 09:28:34
<label for="fusk">dsfdsfsd</label>
<input id="fusk" type="file" name="photo" style="display: none;">
為什么不？ ^_^
請參閱此處的示例
解決方案4
16 2014-12-15 22:34:02
如果您使用的是引導程序，這里是一個更好的解決方案：
<label class="btn btn-default btn-file">
Browse <input type="file" style="display: none;" required>
</label>
對於 IE8 及以下http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
解決方案5
11 2018-05-21 18:00:29
最簡單的方法。。
<label>
Upload
<input type="file" style="visibility: hidden;"/>
</label>
解決方案6
10 2017-01-26 10:38:10
訣竅是隱藏輸入並自定義 label。
HTML：
<div class="inputfile-box">
<input type="file" id="file" class="inputfile" onchange='uploadFile(this)'>
<label for="file">
<span id="file-name" class="file-box"></span>
<span class="file-button">
<i class="fa fa-upload" aria-hidden="true"></i>
Select File
</span>
</label>
</div>
CSS：
.inputfile-box {
position: relative;
}
.inputfile {
display: none;
}
.container {
display: inline-block;
width: 100%;
}
.file-box {
display: inline-block;
width: 100%;
border: 1px solid;
padding: 5px 0px 5px 5px;
box-sizing: border-box;
height: calc(2rem - 2px);
}
.file-button {
background: red;
padding: 5px;
position: absolute;
border: 1px solid;
top: 0px;
right: 0px;
}
JS：
function uploadFile(target) {
document.getElementById("file-name").innerHTML = target.files[0].name;
}
您可以查看此示例： https://jsfiddle.net/rjurado/hnf0zhy1/4/
解決方案7
7 2014-09-28 07:14:34
在 webkit 中你可以試試這個...
input[type="file"]::-webkit-file-upload-button{
/* style goes here */
}
解決方案8
6 2012-05-27 23:04:46
首先它是一個容器：
<div class="upload_file_container">
Select file!
<input type="file" name="photo" />
</div>
第二個，它是CSS風格，如果你想要真正的更多定制，只要睜大眼睛就好了:)
.upload_file_container{
width:100px;
height:40px;
position:relative;
background(your img);
}
.upload_file_container input{
width:100px;
height:40px;
position:absolute;
left:0;
top:0;
cursor:pointer;
}
此示例沒有按鈕內文本的樣式，它取決於字體大小，只需更正容器的高度和填充頂部值
解決方案9
4 2015-09-23 17:10:10
如果您只使用<label> ，隱藏<input>並自定義 label，那就更好了。
HTML：
<input type="file" id="input">
<label for="input" id="label">Choose File</label>
CSS：
input#input{
display: none;
}
label#label{
/* Customize your label here */
}
解決方案10
4 2017-06-01 02:15:40
引導示例
<label className="btn btn-info btn-lg">
Upload
<input type="file" style="display: none" />
</label>
解決方案11
3 2015-08-12 06:51:46
要顯示所選文件的路徑，您可以在 html 上嘗試：
<div class="fileinputs">
<input type="file" class="file">
</div>
在 javascript 中：
var fakeFileUpload = document.createElement('div');
fakeFileUpload.className = 'fakefile';
var image = document.createElement('div');
image.className='fakebtn';
image.innerHTML = 'browse';
fakeFileUpload.appendChild(image);
fakeFileUpload.appendChild(document.createElement('input'));
var x = document.getElementsByTagName('input');
for (var i=0;i<x.length;i++) {
if (x[i].type != 'file') continue;
if (x[i].parentNode.className != 'fileinputs') continue;
x[i].className = 'file hidden';
var clone = fakeFileUpload.cloneNode(true);
x[i].parentNode.appendChild(clone);
x[i].relatedElement = clone.getElementsByTagName('input')[0];
x[i].onchange = x[i].onmouseout = function () {
this.relatedElement.value = this.value;
}
}
和風格：
div.fileinputs {
position: relative;
height: 30px;
width: 370px;
}
input.file.hidden {
position: relative;
text-align: right;
-moz-opacity: 0;
filter: alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
right: 0;
width: 370px;
padding: 0;
margin: 0;
z-index: 1;
line-height: 90%;
}
div.fakefile input {
margin-bottom: 5px;
margin-left: 0;
border: none;
box-shadow: 0px 0px 2px 1px #ccc;
padding: 4px;
width: 241px;
height: 20px;
}
div.fakefile .fakebtn{
width: 150px;
background: #eb5a41;
z-index: 10;
font-family: roya-bold;
border: none;
padding: 5px 15px;
font-size: 18px;
text-align: center;
cursor: pointer;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
display: inline;
margin-left: 3px;
}
div.fileinputs input[type="file"]:hover + div .fakebtn{
background: #DA472E;
}
div.fileinputs input[type="file"] {
opacity: 0;
position: absolute;
top: -6px;
right: 0px;
z-index: 20;
width: 102px;
height: 40px;
cursor: pointer;
}
解決方案12
1 2013-06-10 06:16:18
這是我喜歡的一種方式，因為它使輸入填滿了整個容器。 訣竅是“字體大小：100px”，它需要 go 與“溢出：隱藏”和相對 position。
<div id="upload-file-container" >
<input type="file" />
</div>
#upload-file-container {
width: 200px;
height: 50px;
position: relative;
border: dashed 1px black;
overflow: hidden;
}
#upload-file-container input[type="file"]
{
margin: 0;
opacity: 0;
font-size: 100px;
}
解決方案13
1 2015-01-12 14:03:41
我選擇了這個選項，它闡明了如何通過包含上傳文件名的處理程序來完全自定義瀏覽按鈕，也是自定義的。 它在它們上添加了額外的字段和客戶端控件，只是為了展示如何以“真實”形式包含瀏覽，而不僅僅是獨立的。
這是代碼筆： http://codepen.io/emiemi/pen/zxNXWR
JS：
//click on our custom btn triggers a click on the hidden actual file input
$("#btnup").click(function(){
$("#fileup").click();
});
//changes on the three fields (input, tit,and name) trigger a control which checks if the 3 fields are all filled and if file field is valid (an image is uploaded)
$('#fileup').change(function(){
var formDOMObj = document.upload;
//here we assign tu our text field #fileup the name of the selected file
var res=$('#fileup').val();
var arr = res.split("\\");
//if file is not valid we show the error icon and the red alert
if (formDOMObj.fileup.value.indexOf(".jpg") == -1 && formDOMObj.fileup.value.indexOf(".png") == -1 && formDOMObj.fileup.value.indexOf(".jpeg") == -1 && formDOMObj.fileup.value.indexOf(".bmp") == -1 && formDOMObj.fileup.value.indexOf(".JPG") == -1 && formDOMObj.fileup.value.indexOf(".PNG") == -1 && formDOMObj.fileup.value.indexOf(".JPEG") == -1 && formDOMObj.fileup.value.indexOf(".BMP") == -1){
$( ".imgupload" ).hide("slow");
$( ".imguploadok" ).hide("slow");
$( ".imguploadstop" ).show("slow");
$('#nomefile').css({"color":"red","font-weight":700});
$('#nomefile').html("The file "+arr.slice(-1)[0]+" is not an image!");
$( "#bottone" ).hide();
$( "#fakebtn" ).show();
}else{
//if file is valid we show the green alert
$( ".imgupload" ).hide("slow");
$( ".imguploadstop" ).hide("slow");
$( ".imguploadok" ).show("slow");
$('#nomefile').html(arr.slice(-1)[0]);
$('#nomefile').css({"color":"green","font-weight":700});
if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
//if all three fields are valid the fake input btn is hidden and the actual one i s finally hown
$( "#fakebtn" ).hide();
$( "#bottone" ).show();
}
}
});
$('#nome').change(function(){
//same as file change but on name field
var formDOMObj = document.upload;
if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
$( "#fakebtn" ).hide();
$( "#bottone" ).show();
}else{
$( "#bottone" ).hide();
$( "#fakebtn" ).show();
}
});
$('#tit').change(function(){
//same as file change but on tit field
var formDOMObj = document.upload;
if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
$( "#fakebtn" ).hide();
$( "#bottone" ).show();
}else{
$( "#bottone" ).hide();
$( "#fakebtn" ).show();
}
});
HTML：
<form name="upload" method="post" action="/" enctype="multipart/form-data" accept-charset="utf-8">
<div class="row">
<div class="col-md-6 center">
<!--this is the actual file input, s hidden beacause we wanna use our custom one-->
<input type="file" value="" class="hidden" name="fileup" id="fileup">
<div class="btn-container">
<!--the three icons: default, ok file (img), error file (not an img)-->
<h1 class="imgupload"><i class="fa fa-file-image-o"></i></h1>
<h1 class="imguploadok"><i class="fa fa-check"></i></h1>
<h1 class="imguploadstop"><i class="fa fa-times"></i></h1>
<!--this field changes dinamically displaying the filename we are trying to upload-->
<p id="nomefile">Only pics allowed! (jpg,jpeg,bmp,png)</p>
<!--our custom btn which triggers the actual hidden one-->
<button type="button" id="btnup" class="btn btn-primary btn-lg">Browse for your pic!</button>
</div>
</div>
<!--additional fields-->
<div class="col-md-6">
<div class="row">
<div class="form-group" id="top">
<div class="col-md-12">
<input type="text" maxlength="100" class="form-control" name="nome" id="nome" placeholder="Your Name">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<input type="text" maxlength="50" class="form-control" name="tit" id="tit" placeholder="I am rubber, you are glue">
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<p class="white">All fields are mandatory</p>
</div>
<div class="col-md-4">
<!--the defauld disabled btn and the actual one shown only if the three fields are valid-->
<input type="submit" value="Submit!" class="btn btn-primary" id="bottone" style="padding-left:50px; padding-right:50px; display:none;">
<button type="button" class="btn btn-default" disabled="disabled" id="fakebtn" style="padding-left:40px; padding-right:40px;">Submit! <i class="fa fa-minus-circle"></i></button>
</div>
</div>
</div>
</div>
解決方案14
1 2019-09-27 10:54:34
Here is a quick pure CSS workaround (works on chrome and has a FireFox fallback included), including the file name,a label and an custom upload button, does what it should - no need of JavaScript at all!
注意：☝ 這適用於 Chrome，並且有一個 FireFox 后備 - 無論如何，我不會在現實世界的網站上使用它 - 如果瀏覽器兼容性對你來說是一件事情（它應該是什么）。 所以它更像是一種實驗性的。
.fileUploadInput { display: grid; grid-gap: 10px; position: relative; z-index: 1; }.fileUploadInput label { display: flex; align-items: center; color: setColor(primary, 0.5); background: setColor(white); transition: .4s ease; font-family: arial, sans-serif; font-size: .75em; font-weight: regular; }.fileUploadInput input { position: relative; z-index: 1; padding: 0 gap(m); width: 100%; height: 50px; border: 1px solid #323262; border-radius: 3px; font-family: arial, sans-serif; font-size: 1rem; font-weight: regular; }.fileUploadInput input[type="file"] { padding: 0 gap(m); }.fileUploadInput input[type="file"]::-webkit-file-upload-button { visibility: hidden; margin-left: 10px; padding: 0; height: 50px; width: 0; }.fileUploadInput button { position: absolute; right: 0; bottom: 0; width: 50px; height: 50px; line-height: 0; user-select: none; color: white; background-color: #323262; border-radius: 0 3px 3px 0; font-family: arial, sans-serif; font-size: 1rem; font-weight: 800; }.fileUploadInput button svg { width: auto; height: 50%; } * { margin: 0px; padding: 0px; box-sizing: border-box; border: 0px; outline: 0; background-repeat: no-repeat; appearance: none; border-radius: 0; vertical-align: middle; font-weight: inherit; font-style: inherit; font-family: inherit; text-decoration: none; list-style: none; user-select: text; line-height: 1.333em; } body { display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; background: rgba(66, 50, 98, 0.05); }.container { padding: 25px; box-shadow: 0 0 20px rgba(66, 50, 98, 0.35); border: 1px solid #eaeaea; border-radius: 3px; background: white; } @-moz-document url-prefix() {.fileUploadInput button{ display: none } }
<:-- Author: Ali Soueidan--> <:-- Author URI. https//. www.alisoueidan.com--> <div class="container"> <div class="fileUploadInput"> <label>✨ Upload File</label> <input type="file" /> <button>+</button></div> </div>
解決方案15
0 2014-10-24 19:59:55
您可以設置它們的樣式，但不能刪除已經存在的元素。 如果您有創意，您可以使用它並執行以下操作：
input[type=file] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #EEE;
background: linear-gradient(to top, #FFF, #DDD);
border: thin solid rgba(0,0,0, .5);
border-radius: .25em;
box-shadow: inset .25em .25em .25em rgba(255,255,255, .5), inset -.1em -.1em .1em rgba(0,0,0, 0.1);
cursor: text;
padding: .25em;
}
http://jsfiddle.net/zr1x1m2b/1/
我建議你玩弄這段代碼，刪除行，添加你自己的，做任何事情，直到你得到你喜歡的東西！
解決方案16
0 2017-09-17 23:44:32
只需使用您最喜歡的 CSS 設計一個您想要的普通按鈕即可。
然后調用一個簡單的 JS function 來創建一個隱藏的輸入元素並將其鏈接到您的樣式按鈕。 不要添加特定於瀏覽器的 CSS 來執行隱藏部分。
<!DOCTYPE html>
<meta charset="utf-8">
<style>
button {
width : 160px;
height : 30px;
font-size : 13px;
border : none;
text-align : center;
background-color : #444;
color : #6f0;
}
button:active {
background-color : #779;
}
</style>
<button id="upload">Styled upload button!</button>
<script>
function Upload_On_Click(id, handler) {
var hidden_input = null;
document.getElementById(id).onclick = function() {hidden_input.click();}
function setup_hidden_input() {
hidden_input && hidden_input.parentNode.removeChild(hidden_input);
hidden_input = document.createElement("input");
hidden_input.setAttribute("type", "file");
hidden_input.style.visibility = "hidden";
document.querySelector("body").appendChild(hidden_input);
hidden_input.onchange = function() {
handler(hidden_input.files[0]);
setup_hidden_input();
};
}
setup_hidden_input();
}
Upload_On_Click("upload", function(file) {
console.log("GOT FILE: " + file.name);
});
</script>
請注意，每次用戶選擇文件后，上面的代碼如何重新鏈接它。 這很重要，因為只有在用戶更改文件名時才會調用“onchange”。 但是您可能希望每次用戶提供該文件時都獲取該文件。
有關更多詳細信息，請研究 DropZone 和 gmail 上傳。
解決方案17
0 2018-05-24 10:46:13
$(document).ready(function () { $(document).mousemove(function () { $('#myList').css('display', 'block'); $("#seebtn").css('display', 'none'); $("#hidebtn").css('display', 'none'); $('#displayFileNames').html(''); $("#myList").html(''); var fileArray1 = document.getElementsByClassName('file-input'); for (var i = 0; i < fileArray1.length; i++) { var files = fileArray1[i].files; for (var j = 0; j < files.length; j++) { $("#myList").append("<li style='color:black'>" + files[j].name + "</li>"); } }; if (($("#myList").html()).= '') { $('#unselect'),css('display'; 'block'). $('#divforfile'),css('color'; 'green'). $('#attach'),css('color'; 'green'). $('#displayFileNames').html($("#myList").children();length + ' ' + 'files selezionato'); }. if (($("#myList").html()) == '') { $('#divforfile'),css('color'; 'black'). $('#attach'),css('color'; 'black'). $('#displayFileNames');append('Nessun File Selezionato'); }; }); }). function choosefiles(obj) { $(obj);hide(). $('#myList'),css('display'; 'none'). $('#hidebtn'),css('display'; 'none'). $("#seebtn"),css('display'; 'none'). $('#unselect'),css('display'; 'none'). $("#upload-form");append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />"). $('#displayFileNames');html(''). } $(document).ready(function () { $('#unselect').click(function () { $('#hidebtn'),css('display'; 'none'). $("#seebtn"),css('display'; 'none'). $('#displayFileNames');html(''). $("#myList");html(''). $('#myFileInput');val(''). document.getElementById('upload-form');reset(). $('#unselect'),css('display'; 'none'). $('#divforfile'),css('color'; 'black'). $('#attach'),css('color'; 'black'); }); }); <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style>.divs { position: absolute; display: inline-block; background-color: #fff; }.inputs { position: absolute; left: 0px; height: 2%; width: 15%; opacity: 0; background: #00f; z-index: 100; }.icons { position: absolute; } </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <form id='upload-form' action='' method='post' enctype='multipart/form-data'> <div class="divs" id="divforfile" style="color:black"> <input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' /> <i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label> </div> </form> <br /> </div> <br /> <div> <button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files ▼</p></button> <button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files ▲</p></button> <button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left"> <span style="color:red">×</span> </button> <div id="displayFileNames"> </div> <ul id="myList"></ul> </div>
這是我使用 jquery 和 javascript（Visual Studio）的全功能定制文件上傳/附件。 這將很有用！
代碼將在評論部分提供！
鏈接： https://youtu.be/It38OzMAeig
享受：）
$(document).ready(function () { $(document).mousemove(function () { $('#myList').css('display', 'block'); $("#seebtn").css('display', 'none'); $("#hidebtn").css('display', 'none'); $('#displayFileNames').html(''); $("#myList").html(''); var fileArray1 = document.getElementsByClassName('file-input'); for (var i = 0; i < fileArray1.length; i++) { var files = fileArray1[i].files; for (var j = 0; j < files.length; j++) { $("#myList").append("<li style='color:black'>" + files[j].name + "</li>"); } }; if (($("#myList").html()).= '') { $('#unselect'),css('display'; 'block'). $('#divforfile'),css('color'; 'green'). $('#attach'),css('color'; 'green'). $('#displayFileNames').html($("#myList").children();length + ' ' + 'files selezionato'); }. if (($("#myList").html()) == '') { $('#divforfile'),css('color'; 'black'). $('#attach'),css('color'; 'black'). $('#displayFileNames');append('Nessun File Selezionato'); }; }); }). function choosefiles(obj) { $(obj);hide(). $('#myList'),css('display'; 'none'). $('#hidebtn'),css('display'; 'none'). $("#seebtn"),css('display'; 'none'). $('#unselect'),css('display'; 'none'). $("#upload-form");append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />"). $('#displayFileNames');html(''). } $(document).ready(function () { $('#unselect').click(function () { $('#hidebtn'),css('display'; 'none'). $("#seebtn"),css('display'; 'none'). $('#displayFileNames');html(''). $("#myList");html(''). $('#myFileInput');val(''). document.getElementById('upload-form');reset(). $('#unselect'),css('display'; 'none'). $('#divforfile'),css('color'; 'black'). $('#attach'),css('color'; 'black'); }); }); <style>.divs { position: absolute; display: inline-block; background-color: #fff; }.inputs { position: absolute; left: 0px; height: 2%; width: 15%; opacity: 0; background: #00f; z-index: 100; }.icons { position: absolute; } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div> <form id='upload-form' action='' method='post' enctype='multipart/form-data'> <div class="divs" id="divforfile" style="color:black"> <input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' /> <i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label> </div> </form> <br /> </div> <br /> <div> <button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files ▼</p></button> <button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files ▲</p></button> <button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left"> <span style="color:red">×</span> </button> <div id="displayFileNames"> </div> <ul id="myList"></ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> $(document).ready(function () { $(document).mousemove(function () { $('#myList').css('display', 'block'); $("#seebtn").css('display', 'none'); $("#hidebtn").css('display', 'none'); $('#displayFileNames').html(''); $("#myList").html(''); var fileArray1 = document.getElementsByClassName('file-input'); for (var i = 0; i < fileArray1.length; i++) { var files = fileArray1[i].files; for (var j = 0; j < files.length; j++) { $("#myList").append("<li style='color:black'>" + files[j].name + "</li>"); } }; if (($("#myList").html()).= '') { $('#unselect'),css('display'; 'block'). $('#divforfile'),css('color'; 'green'). $('#attach'),css('color'; 'green'). $('#displayFileNames').html($("#myList").children();length + ' ' + 'files selezionato'); }. if (($("#myList").html()) == '') { $('#divforfile'),css('color'; 'black'). $('#attach'),css('color'; 'black'). $('#displayFileNames');append('Nessun File Selezionato'); }; }); }). function choosefiles(obj) { $(obj);hide(). $('#myList'),css('display'; 'none'). $('#hidebtn'),css('display'; 'none'). $("#seebtn"),css('display'; 'none'). $('#unselect'),css('display'; 'none'). $("#upload-form");append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />"). $('#displayFileNames');html(''). } $(document).ready(function () { $('#unselect').click(function () { $('#hidebtn'),css('display'; 'none'). $("#seebtn"),css('display'; 'none'). $('#displayFileNames');html(''). $("#myList");html(''). $('#myFileInput');val(''). document.getElementById('upload-form');reset(). $('#unselect'),css('display'; 'none'). $('#divforfile'),css('color'; 'black'). $('#attach'),css('color'; 'black'); }); });
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style>.divs { position: absolute; display: inline-block; background-color: #fff; }.inputs { position: absolute; left: 0px; height: 2%; width: 15%; opacity: 0; background: #00f; z-index: 100; }.icons { position: absolute; } </style>
<div> <form id='upload-form' action='' method='post' enctype='multipart/form-data'> <div class="divs" id="divforfile" style="color:black"> <input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' /> <i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label> </div> </form> <br /> </div> <br /> <div> <button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files ▼</p></button> <button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files ▲</p></button> <button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left"> <span style="color:red">×</span> </button> <div id="displayFileNames"> </div> <ul id="myList"></ul> </div>解決方案18
-2 2016-02-14 19:17:28
這是我最近發現的一種方法，有點 jQuery
HTML 代碼：
<form action="">
<input type="file" name="file_upload" style="display:none" id="myFile">
<a onclick="fileUpload()"> Upload a file </a>
</form>
對於 javascript/jQuery 部分：
<script>
function fileUpload() {
$("#myFile").click();
}
</script>
在這個例子中，我放置了一個“錨”標簽來觸發文件上傳。 你可以用你想要的任何東西替換，只要記住把“onclick”屬性放在正確的 function 上。
希望這可以幫助！
PS：不要忘記包含來自 CDN 或任何其他來源的 jQuery
如何上傳定制 <input type=“file”> 沒有提交按鈕
[英]How to upload a customize <input type=“file”> without submit button
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.