你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
当前回答
这周我还需要自定义按钮,并在旁边显示所选的文件名,所以在阅读了上面的一些答案后(谢谢BTW),我想出了以下实现:
HTML:
<div class="browse">
<label id="uploadBtn" class="custom-file-upload">Choose file
<input type="file" name="fileInput" id="fileInput" accept=".yaml" ngf-select ngf-change="onFileSelect($files)" />
</label>
<span>{{fileName}}</span>
</div>
CSS
input[type='file'] {
color: #a1bbd5;
display: none;
}
.custom-file-upload {
border: 1px solid #a1bbd5;
display: inline-block;
padding: 2px 8px;
cursor: pointer;
}
label{
color: #a1bbd5;
border-radius: 3px;
}
Javascript(角)
app.controller('MainCtrl', function($scope) {
$scope.fileName = 'No file chosen';
$scope.onFileSelect = function ($files) {
$scope.selectedFile = $files;
$scope.fileName = $files[0].name;
};
});
基本上我正在使用ng-file-upload lib, angular方面,我将文件名绑定到我的$作用域,并给它的初始值为'No file selected ',我还将onFileSelect()函数绑定到我的作用域,因此当一个文件被选中时,我使用ng-upload API获取文件名并将其分配给$scope.filename。
其他回答
这里有一个交叉兼容的方法,可以在Chrome, Firefox, Safari和IE中工作。
$(window).on('resize',function() { var eqw = $('input[type=text]').width(); $('textarea').width(eqw - 32); $('.fileoutline').width(eqw); }).trigger('resize'); $('.file+.file').hide(); $(".file").click(function() { var input = $(this).next().find('input'); input.click(); }); $("input[id='file1']").change(function () { $('.file+.file').show(); var filename = $(this).val(); $('.filename1').html(filename); $('.file').find('span').html('CHANGE FILE'); }); $("input[id='file2']").change(function() { var filename = $(this).val(); $('.filename2').html(filename); $('.file').find('span').html('CHANGE FILE'); }); form { width:55%;margin:0 auto;padding-left:3vw;text-align:left; } fieldset{border:0;margin:0;padding:0;} textarea{overflow: auto;height:25vh;resize:none;outline:none;width:93%;background:none;padding:8px 15px;display:block;text-align:left;border:1px solid #000;margin:0;color:#000;font:700 0.85em/2.2 'Futura Book',Arial,sans-serif;} input:focus{outline:none;} input[type=text]{font-weight:700;font-size:0.85em;line-height:2.2;background:none;text-align:left;letter-spacing:0.02em;height:33px;display:block;width:100%;border:none;border-bottom:1px solid #000;margin:0 0 28px;color:#000;} input:focus{outline:0;} .fileoutline { width:100%;margin:25px auto 0px;left:0;right:0;height:40px;border:1px solid #000;position:relative; } input[type=file] { -webkit-appearance: none;-moz-appearance:none;appearance: none;opacity:0;position:relative;width:100%;height:35px;font-weight:700;font-size:0.5em;line-height:28px;letter-spacing:0.2em;position: absolute;left: 0;top: 0;height: 100%;z-index:10; } .file,.filename1,.filename2,#submit { font-size:10px;letter-spacing:0.02em;text-transform:uppercase;color:#ffffff;text-align:center;width:35%;} .file,.filename1,.filename2 { font-weight:200;line-height:28px;} .filename1,.filename2 { width:375px;overflow:hidden;top:0;text-align:right;position:absolute;display:block;height:26px;color:#000;} .file { position:absolute;width:100px;top:6px;left:10px;background:#000;border-radius:14px; } ::-webkit-file-upload-button,::-ms-browse { width: 100%;height:25px;opacity: 0;-webkit-appearance: none;appearance: none; } #submit{border:none;height:32px;background: #000;box-shadow:0 0 0 0.5px #fff,0 0 0 5px #000;margin:35px 0;float:right;display:block;} <form action="" method="post" enctype="multipart/form-data"> <input type="text" name="email" id="email" placeholder="Email address" /> <input type="text" type="text" name="name" id="title" placeholder="Name" /> <textarea rows="7" cols="40" name="description" id="description" placeholder="Description"></textarea> <div class="fileoutline"><div class="file"><span>CHOOSE FILE</span><input type="file" name="file[]" id="file1"><div class="filename1">NO CHOSEN FILE</div></div></div> <div class="fileoutline"><div class="file"><span>CHOOSE FILE</span><input type="file" name="file[]" id="file2"><div class="filename2">NO CHOSEN FILE</div></div></div> <input type="submit" name="submit" value="Submit" id="submit"> </form>
这里有一个简单的css解决方案,它创建了一个一致的目标区域,并让你的伪造元素的风格,无论你喜欢。
基本思想是这样的:
有两个“假”元素(一个文本输入/链接)作为你的真实文件输入的兄弟。绝对放置它们,让它们完全在你的目标区域上方。 用div包装你的文件输入。将overflow设置为hidden(这样文件输入就不会溢出来),并使它恰好是你想要的目标区域的大小。 在文件输入上设置不透明度为0,这样它就被隐藏了,但仍然可以点击。给它一个大的字体大小,这样你就可以点击目标区域的所有部分。
下面是jsfiddle: http://jsfiddle.net/gwwar/nFLKU/
<form>
<input id="faux" type="text" placeholder="Upload a file from your computer" />
<a href="#" id="browse">Browse </a>
<div id="wrapper">
<input id="input" size="100" type="file" />
</div>
</form>
这里有一个解决方案,它没有真正对<input type="file" />元素进行样式化,而是在其他元素之上使用<input type="file" />元素(可以进行样式化)。<input type="file" />元素实际上是不可见的,因此,整体的错觉是一个漂亮的样式文件上传控件。
我最近遇到了这个问题,尽管Stack Overflow上有太多的答案,但似乎没有一个真正符合要求。最后,我对它进行了定制,以获得一个简单而优雅的解决方案。
我还在Firefox、IE(11、10和9)、Chrome和Opera、iPad和一些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>
希望这能有所帮助!!
本地拖放支持的工作示例:https://jsfiddle.net/j40xvkb3/
当样式化文件输入时,您不应该破坏任何本机交互 输入提供。
display: none方法破坏了本地拖放支持。
为了不破坏任何东西,你应该对输入使用不透明度:0的方法,并在包装器中使用相对/绝对模式来定位它。
使用这种技术,你可以很容易地为用户设置点击/拖放区域的样式,并在dragenter事件上添加javascript自定义类来更新样式,并给用户一个反馈,让他看到他可以拖放文件。
HTML:
<label for="test">
<div>Click or drop something here</div>
<input type="file" id="test">
</label>
CSS:
input[type="file"] {
position: absolute;
left: 0;
opacity: 0;
top: 0;
bottom: 0;
width: 100%;
}
div {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #ccc;
border: 3px dotted #bebebe;
border-radius: 10px;
}
label {
display: inline-block;
position: relative;
height: 100px;
width: 400px;
}
下面是一个工作示例(带有额外的JS来处理拖拽事件和删除的文件)。
https://jsfiddle.net/j40xvkb3/
希望这对你有所帮助!
<input type="file" name="media" style="display-none" onchange="document.media.submit()">
我通常会使用简单的javascript来定制文件输入标记。一个隐藏的输入字段,点击按钮,javascript调用隐藏字段,简单的解决方案与任何css或一堆jquery。
<button id="file" onclick="$('#file').click()">Upload File</button>