1. 首页
  2. 问答
  3. 样式输入类型文件？

样式输入类型文件？

2011-02-05 75 views
34

是否可以对类型文件的输入元素进行样式设置而不必担心浏览器的兼容性？在我的情况下，我需要实现一个背景图像和圆形边框（1px），如果可能的话，该按钮也应该自定义。样式输入类型文件？

来源

2011-02-05 Banshee

回答

29

按照这些步骤，那么你可以创建自定义样式文件上传表单：

1）这是一个简单的HTML表单（请阅读我在这里写娄HTML注释）

<form action="#type your action here" method="POST" enctype="multipart/form-data"> 
    <div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div> 
    <!-- this is your file input tag, so i hide it!--> 
    <div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div> 
    <!-- here you can have file submit button or you can write a simple script to upload the file automatically--> 
    <input type="submit" value='submit' > 
    </form>

2.）然后使用这个简单的脚本将点击事件传递给文件输入标签。

function getFile(){ 
     document.getElementById("upfile").click(); 
    }

现在，您可以使用任何类型的样式，而无需担心如何更改默认样式。 我非常了解这一点，因为我一直在尝试将默认样式更改为一个半月。相信我这很难，因为不同的浏览器有不同的上传输入标签。所以使用这个来建立你自定义的文件上传窗体。这里是完整的AUTOMATED UPLOAD代码。

<html> 
<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"> 
function getFile(){ 
    document.getElementById("upfile").click(); 
} 
function sub(obj){ 
    var file = obj.value; 
    var fileName = file.split("\\"); 
    document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1]; 
    document.myForm.submit(); 
    event.preventDefault(); 
    } 
</script> 
<body> 
<center> 
<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm"> 
<div id="yourBtn" onclick="getFile()">click to upload a file</div> 
<!-- this is your file input tag, so i hide it!--> 
<!-- i used the onchange event to fire the form submission--> 
<div style='height: 0px; width: 0px;overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)"/></div> 
<!-- here you can have file submit button or you can write a simple script to upload the file automatically--> 
<!-- <input type="submit" value='submit' > --> 
</form> 
</center> 
</body> 
</html>

来源

2012-03-15 06:45:48 teshguru

+0

很好的解决方案。在输入上使用'display：none'而不是'height：0px; width：0px; overflow：hidden;'将其从DOM /您的布局中移除。 – 2016-04-27 22:39:54

8

通过Jquery的相同的解决方案。如果在页面中有多个文件输入，则工作。

$j(".filebutton").click(function() { 
    var input = $j(this).next().find('input'); 
    input.click(); 
}); 

$j(".fileinput").change(function(){ 

    var file = $j(this).val(); 
    var fileName = file.split("\\"); 
    var pai =$j(this).parent().parent().prev(); 
    pai.html(fileName[fileName.length-1]); 
    event.preventDefault(); 
});

来源

2012-03-28 19:06:02 Iris

+1

你能为此发布小提琴吗？ – johannesMatevosyan 2016-03-15 10:20:49

3

在谷歌四处寻找了好久，尝试了多种解决方案之后，两个CSS，JavaScript和JQuery的，我发现，其中大多数是使用图像作为按钮。其中一些难以使用，但我确实设法拼凑了一些最终为我工作的东西。

的重要组成部分对我来说是：

  • 浏览按钮必须是一个按钮（不是图像）。
  • 该按钮必须具有悬停效果（使其看起来不错）。
  • 文本和按钮的宽度必须易于调整。
  • 该解决方案必须在IE8，FF，Chrome和Safari中工作。

这是我想出的解决方案。并希望它对其他人也有用。

更改.file_input_textbox的宽度以更改文本框的宽度。

更改.file_input_div，.file_input_button和.file_input_button_hover的宽度以更改按钮的宽度。你也许需要调整一下位置。我从来没有想过为什么...

要测试此解决方案，请创建一个新的html文件并将其粘贴到其中。

<html> 
<head> 

<style type="text/css"> 

.file_input_textbox {height:25px;width:200px;float:left; } 
.file_input_div  {position: relative;width:80px;height:26px;overflow: hidden; } 
.file_input_button {width: 80px;position:absolute;top:0px; 
        border:1px solid #F0F0EE;padding:2px 8px 2px 8px; font-weight:bold; height:25px; margin:0px; margin-right:5px; } 
.file_input_button_hover{width:80px;position:absolute;top:0px; 
        border:1px solid #0A246A; background-color:#B2BBD0;padding:2px 8px 2px 8px; height:25px; margin:0px; font-weight:bold; margin-right:5px; } 
.file_input_hidden {font-size:45px;position:absolute;right:0px;top:0px;cursor:pointer; 
        opacity:0;filter:alpha(opacity=0);-ms-filter:"alpha(opacity=0)";-khtml-opacity:0;-moz-opacity:0; } 
</style> 
</head> 
<body> 
    <input type="text" id="fileName" class="file_input_textbox" readonly="readonly"> 
<div class="file_input_div"> 
    <input id="fileInputButton" type="button" value="Browse" class="file_input_button" /> 
    <input type="file" class="file_input_hidden" 
     onchange="javascript: document.getElementById('fileName').value = this.value" 
     onmouseover="document.getElementById('fileInputButton').className='file_input_button_hover';" 
     onmouseout="document.getElementById('fileInputButton').className='file_input_button';" /> 
</div> 
</body> 
</html>

来源

2012-06-01 09:00:22

+0

小提琴：https：//jsfiddle.net/gd4wuvga/ – Picard 2015-12-20 17:34:31

3

这里有一个简单的CSS唯一的解决方案，创建一个一致的目标区域，并让你的风格你的人造元素，只要你喜欢。

的基本思路是这样的：

  1. 有两个“假”的元素（一个文本输入/链接）作为兄弟到你的真实文件输入。绝对放置它们，使它们完全位于目标区域的顶部。
  2. 用div封装您的文件输入。将溢出设置为隐藏（所以文件输入不会溢出），并将其设置为您希望目标区域的大小。
  3. 将文件输入中的不透明度设置为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>

来源

2013-03-02 20:53:47

相关问题

 相关问题