你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
当前回答
Jquery版本的teshguru脚本自动检测输入[文件]和样式
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style>
#yourBtn{
position: relative;
top: 150px;
font-family: calibri;
width: 150px;
padding: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 1px dashed #BBB;
text-align: center;
background-color: #DDD;
cursor:pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
$('input[type=file]').each(function()
{
$(this).attr('onchange',"sub(this)");
$('<div id="yourBtn" onclick="getFile()">click to upload a file</div>').insertBefore(this);
$(this).wrapAll('<div style="height: 0px;width: 0px; overflow:hidden;"></div>');
});
});
function getFile(){
$('input[type=file]').click();
}
function sub(obj){
var file = obj.value;
var fileName = file.split("\\");
document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1];
}
</script>
</head>
<body>
<?php
var_dump($_FILES);
?>
<center>
<form action="" method="post" enctype="multipart/form-data" name="myForm">
<input id="upfile" name="file" type="file" value="upload"/>
<input type="submit" value='submit' >
</form>
</center>
</body>
</html>
其他回答
我发现最好的方法是有一个输入类型:文件，然后将其设置为display: none。给它一个id。创建一个按钮或任何您想要打开文件输入的其他元素。
然后在它(按钮)上添加一个事件侦听器，当单击它时，它会模拟对原始文件输入的单击。 比如点击一个名为hello的按钮，但它会打开一个文件窗口。
示例代码
//i am using semantic ui
<button class="ui circular icon button purple send-button" id="send-btn">
<i class="paper plane icon"></i>
</button>
<input type="file" id="file" class="input-file" />
javascript
var attachButton=document.querySelector('.attach-button');
attachButton.addEventListener('click', e=>{
$('#file').trigger("click")
})
这周我还需要自定义按钮，并在旁边显示所选的文件名，所以在阅读了上面的一些答案后(谢谢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。
我发现这种方法最简单、最轻便。
下面是工作示例:http://codepen.io/c3zar22/pen/QNoYXN
以下是解释:
this would be the markup: <label for="attach-project-file"> <span id="remove-project-file" class="close">x</span> <div class="filename" id="attached-project-file">Click to select a file</div> </label> <input id="attach-project-file" type="file"> hide the input in a hacky way like this: #attach-project-file { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } style the corresponding label instead [for="attach-project-file"] { /* your styles here */ } style "remove file" button .close { font-size: 16px; padding: 10px; position: absolute; top: 0; right: 0; cursor: pointer; font-style: normal; } .filename element will be used to display the selected file below is the commented JS code needed (using jQuery) to make it work: var $attach = $('#attach-project-file'), $remove = $('#remove-project-file'), $name = $('#attached-project-file'); // initially hide the remove button $remove.hide(); // do this when file input has changed // i.e.: a file has been selected $attach.on('change', function() { var val = $(this).val(); if (val !== '') { // if value different than empty // show the file name as text // hide/text/fadeIn creates a nice effect when changing the text $name .hide() .text(val) .fadeIn(); // show the remove button $remove.fadeIn(); } else { // if value empty, means the file has been removed // show the default text $name .hide() .text('Click to select a file') .fadeIn(); // hide remove button $remove.fadeOut(); } }); // remove selected file when clicking the remove button // prevent click bubbling to the parent label and triggering file selection $remove.on('click', function(e) { e.preventDefault(); e.stopPropagation(); $attach .val('') .change(); // trigger change event });
我发现插件解决方案太笨重了，所以我制作了自己的jQuery插件Drolex FileStyle。
This plug-in allows you to style file input fields however you want. Actually, you style div elements to look like a tricked out file input, and the actual file input is automatically overlaid with 0% opacity. No additional HTML is required. Just include the css and js files in the page you want Drolex FileStyle and that's it! Edit the css file to your liking. Don't forget the jQuery library if your page doesn't already have it. If the client does not run JavaScript, then the file input will not be modified by js or css.
测试工作在Chrome 24, Firefox 18, Internet Explorer 9。 预计可以在之前的版本中使用。
下载:http://web.drolex.net/Drolex-FileStyle.zip。
这是简单的jquery。对Ryan的建议稍加修改后给出一个代码示例。
基本的html:
<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">
当你准备好时，一定要在输入上设置样式:不透明度:0 你不能设置display: none，因为它需要是可点击的。但是你可以把它放在“new”按钮下面，或者如果你喜欢的话，把它塞进z-index的其他东西下面。
设置一些jquery，当你点击图像时，点击真正的输入。
$('#image_icon').click(function() {
$('#the_real_file_input').click();
});
现在你的按钮开始工作了。更改时只需剪切并粘贴值。
$('input[type=file]').bind('change', function() {
var str = "";
str = $(this).val();
$("#filename").text(str);
}).change();
发长音!您可能需要将val()解析为更有意义的内容，但您应该已经全部设置好了。
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换，锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度，而不是整个元素的宽度，使用CSS?
