1. 首页
  2. 问答
  3. 使用CSS和上传按钮的功能设计样式

使用CSS和上传按钮的功能设计样式

2010-12-10 157 views
4

我和一个工作人员正在为我们的客户开发一个Web应用程序来登录和管理这些细节。其中一个部分要求用户上传那里的公司徽标，但因为我们都知道html browes按钮或标签，因为它也被称为硬cookie。这是我希望它看起来： alt text使用CSS和上传按钮的功能设计样式

但现实是，如果我把一个普通的旧文件标签在那里它看起来平淡无奇，一般进出的地方，所以我用Google搜索的解决方案和一个之后狩猎我碰到这个代码产生的代码下面的图片（这点我也显示没有设置为零的不透明度文件上传）：

#divinputfile 
{ 
height:85px; 
width:250px; 
margin:0px; 
background-image: url(images/upload_file.gif); 
background-repeat: no-repeat; 
background-position: right bottom; 
} 

#divinputfile #filepc 
{ 
opacity: 0.0; 
-moz-opacity: 0.0; 
filter: alpha(opacity=00); 
font-size:16px; 
cursor: pointer; 
} 

#filepc 
{ 
margin-top: 12px; 
} 

#fakeinputfile 
{ 
margin-top:-28px; 
} 

#fakeinputfile #fakefilepc 
{ 
width:250px; 
height:22px; 
font-size:18px; 
font-family:Arial; 
} 

<body> 
<br /> 
<div id="divinputfile"> 
    <div id="fakeinputfile"> 
    <br /> 
     <input name="fakefilepc" type="text" id="fakefilepc" /> 
    </div> 
    <div align="right"> 
    <input name="filepc" type="file" size="1" id="filepc" onchange="document.getElementById('fakefilepc').value = this.value;"/> 
    </div> 
</div> 
</body>

alt text

这是一个基本的黑客，当我选择样式化的按钮我真的选择了不可见的上传按钮，然后是upl的值oad被传递到上面的测试框中，看起来像是它上传的真正部分。这种方法的两个问题，我希望你能帮助我在这里是

a）只有按钮可以点击上传。在大多数浏览器中（不包括Chrome浏览器），您可以点击文本框以及按钮上传图片。当然，这种方法的文件路径的文本被添加到文本框，但任​​何改变该框不会改变文件，例如：如果你选择file1.jpg上传，但你真的想file2.jpg，改变文本路径在文本框不会将事情改变为ACTUAL上传元素

b）Chrome和Opera等一些浏览器将\ fakepath \ filepath添加到文本框中，而这只是丑陋的，所以任何if语句都可以删除它，这也会非常有用。

希望你们可以帮助我，如果不通过代码提示，那么如果有人知道一个好的JavaScript插件，节省一天。

谢谢

来源

2010-12-10 Daniel James Clarke

+0

可以使用CSS3.Go页面：http://w3schools.com/css3/css3_borders.asp会让你看看如何四舍五入你的按钮角落.. – Rares 2012-02-17 09:52:29

回答

1

您已经有了用于文本框的javascript来显示更改时的新文件路径值。 这就是你将不得不删除任何/虚假路径/零件等的地方。

您还可以将一个点击事件添加到文本框，它将激活文件浏览点击事件。

我可以立即告诉你，用jQuery很容易，但我不知道如何用普通的JS做到这一点。

/电子邮件： 事实上，似乎文件输入操作无法触发。查看相关问题In JavaScript can I make a "click" event fire programmatically for a file input element?

来源

2010-12-10 01:15:42 Kissaki

+1

等待，如果它是* _impossible_ *与普通的o JavaScript（就像你链接到的其他问题所说的那样）jQuery如何可以很容易？ – 2010-12-22 04:07:15

1

问题a： 没有触发点击事件。安全和所有这一切。您可以像第一个一样添加第二个不可见的上传按钮。如果有变化，则清除另一个。并且黑客堆积起来...

问题b： 请参阅Kissaki的答案。无论如何，你需要一些JS清除第二个隐形领域...

来源

2010-12-22 03:31:58 Hemlock

1

这是一个解决方案。

  1. 问题A通过使<input type="file" />成为您的小部件的完整大小并使用部门创建不可点击区域来解决。
  2. 问题B使用我发现here
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>Style the File Upload Input - Example</title> 
<style type="text/css"> 
#file-upload { 
    position:relative; 
    top:0px; 
    left:0px; 
    width:250px; 
    height:65px; 
    overflow:hidden; 
    padding-top:15px; 
    background-image: url(images/upload_file.gif); 
    background-repeat: no-repeat; 
    background-position: right bottom; 
} 
#file-upload input[type='file'] { 
    width:250px; 
    height:65px; 
    font-size:65px; 
    opacity:0; 
    filter:alpha(opacity=0); 
    position:absolute; 
    top:15px; 
    left:0px; 
    z-index:9; 
} 
#file-upload input { 
    width:97%; 
} 
#file-upload #no-click { 
    position:absolute; 
    bottom:0px; 
    left:0px; 
    z-index:10; 
    width:125px; 
    height:40px; 
} 
</style> 
</head> 
<body> 
<div id="file-upload"> 
    <input size="0" name="filepc" type="file" id="filepc" onchange="var clone = this.cloneNode(true);clone.type='text';document.getElementById('fakefilepc').value = clone.value?clone.value:this.value;" /> 
    <div id="fake-file-upload"> 
     <input name="fakefilepc" type="text" id="fakefilepc" /> 
     <div id="no-click"></div> 
    </div> 
</div> 
</body>

您可能要担心优雅降级的伎俩解决......这里是用HTML，CSS相同和JavaScript更干净分离，这应该干净地降解。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>Style the File Upload Input - Example</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("body").addClass("js"); 
     $("#file-upload").append("<div id=\"fake-file-upload\">" + 
         "<input name=\"fakefilepc\" type=\"text\" id=\"fakefilepc\" />" + 
         "<div id=\"no-click\"></div>" + 
        "</div>"); 
     $("#file-upload input[type='file']").change(function() { 
      var clone = this.cloneNode(true); 
      clone.type='text'; 
      document.getElementById('fakefilepc').value = clone.value?clone.value:this.value; 
     }); 
    }); 
</script> 
<style type="text/css"> 
#file-upload { 
    position:relative; 
    top:0px; 
    left:0px; 
    width:250px; 
    height:65px; 
} 
body.js #file-upload { 
    overflow:hidden; 
    padding-top:15px; 
    background-image: url(images/upload_file.gif); 
    background-repeat: no-repeat; 
    background-position: right bottom; 
} 
body.js #file-upload input[type='file'] { 
    width:250px; 
    height:65px; 
    font-size:65px; 
    opacity:0; 
    filter:alpha(opacity=0); 
    position:absolute; 
    top:15px; 
    left:0px; 
    z-index:9; 
} 
body.js #file-upload input { 
    width:97%; 
} 
body.js #file-upload #no-click { 
    position:absolute; 
    bottom:0px; 
    left:0px; 
    z-index:10; 
    width:125px; 
    height:40px; 
} 
</style> 
</head> 
<body> 
<div id="file-upload"> 
    <input size="0" name="filepc" type="file" id="filepc" /> 
</div> 
</body>

我用下面的图像作为图像images/upload_file.gif（及其各自的一切与之相关的尺寸）

alt text

来源

2010-12-22 04:51:54

1

这很难做，甚至更难跨浏览器。 Webkit（safari/chrome）的处理方式与IE和Mozilla完全不同。如图所示，您最终将面临大量的黑客攻击，随着它们的发布，您将不断需要检查每个浏览器。

我发现的一种方法是逐步增强使用Flash插件。您只需检查闪存是否存在，闪存块是否阻止该元素。

例如：http://www.uploadify.com/demos/（虽然这似乎并没有检查是Flashblock！）

来源

2010-12-25 20:29:35 GlennG

相关问题

 相关问题