如何自定义<input type =“file”>？
是否可以改变<input type="file">的外观？
你不能修改很多关于input[type=file]控制本身。
由于单击与input正确配对的label元素将激活/聚焦它，我们可以使用label来触发操作系统浏览对话框。
这是你如何做到这一点…
HTML
<label for="upload-photo">Browse...</label> <input type="file" name="photo" id="upload-photo" />
CSS
label { cursor: pointer; /* Style as you please, it will become the visible UI component. */ } #upload-photo { opacity: 0; position: absolute; z-index: -1; }
表单控件的CSS将使其看起来不可见，不占用文档布局中的空间，但仍然存在，因此可以通过label激活。
如果您希望在select后显示用户select的path，则可以使用JavaScript来监听change事件，然后阅读浏览器提供给您的path（出于安全原因，您可能会对确切的path说谎 ）。 最终用户使用它的一种方法是简单地使用返回的path的基名（因此用户只能看到所选的文件名）。
鼓鼓的一个伟大的指导为这个样式。
类似的东西也许？
<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>
<label for="fusk">dsfdsfsd</label> <input id="fusk" type="file" name="photo" style="display: none;">
为什么不？ ^ _ ^
看到这里的例子
在webkit中，你可以试试这个…
input[type="file"]::-webkit-file-upload-button{ /* style goes here */ }
首先它是一个容器：
<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; }
这个例子没有button的文本样式，它取决于字体大小，只是纠正容器的高度和填充值
如果您只使用<label> ，隐藏<input>并自定义标签，那就好多了。
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 */ }
如果你使用bootstrap这是一个更好的解决scheme：
<label class="btn btn-default btn-file"> Browse <input type="file" style="display: none;"> </label>
对于IE8及以下版本 http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
资料来源： https : //stackoverflow.com/a/18164555/625952
诀窍是隐藏input和自定义标签。
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/
这是我喜欢的一种方式，因为它使input填充整个容器。 窍门是“font-size：100px”，它需要和“overflow：hidden”和相对位置一起去。
<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; }
您可以设置它们的样式，但不能删除已经存在的元素。 如果你有创意，你可以使用它来做这样的事情：
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/
我build议你玩这个代码，删除线，添加你自己的，做任何事情，直到你看到你喜欢的东西！
我去了这个选项，它阐明了如何完全定制浏览button，包括上传的文件名的处理程序，也是定制的。 它在其上添加了额外的字段和客户端控件，只是为了展示如何以“真实”的forms包含浏览，而不仅仅是一个独立的。
这是codepen： 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 is 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>
显示所选文件的path，你可以在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; }
Bootstrap例子
<label className="btn btn-info btn-lg"> Upload <input type="file" style="display: none" /> </label>
只要使用你喜欢的CSS，就可以使用普通的button。
然后调用一个简单的JS函数来创build隐藏的input元素并将其链接到您的样式化button。 不要添加浏览器特定的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>
注意每次用户select一个文件后，上面的代码是如何重新链接它的。 这很重要，因为只有在用户更改文件名时才会调用“onchange”。 但是，您可能希望每次用户提供文件时都要获取该文件。
欲了解更多详情，研究DropZone和Gmail上传。
这是我最近发现的一个方法，用一点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>
在这个例子中，我已经放置了一个“anchor”标签来触发file upload。 你可以用你想要的任何东西来replace，只要记住把“onclick”属性用适当的函数。
希望这可以帮助！
PS：不要忘记从CDN或任何其他来源包括jQuery
