如何在html中设置输入类型=文件？ [英] How to style a input type=file in html?

问题描述

我做了一些研究，发现可能很难设计一个输入类型=文件。不过，我意识到youtube有一个美丽的按钮，当你想要将视频上传到网站时显示。 （可能需要登录： http://www.youtube.com/upload ）。
- 所以基本上它允许用户点击按钮，选择一个文件，然后进行上传。
我不确定这是如何实现的，而不是使用丑陋的< input> 标签？或者任何人都知道任何改变良好的方式来创建一个漂亮的文件上传界面？

LIVE DEMO

 < button id =imageDroponclick =document.getElementById（'uploadImage'）。click（）title =点击或拖动图片>上传图片< / button> 
 
< input id =uploadImagetype =file/> 
  

 ＃ imageDrop {
 background：#fff; 
 width：300px; 
 height：180px; 
 font-size：20px; 
 font-style：italic; 
 border-radius：18px; 
 border：2px虚线＃444; 
} 
 
 #uploadImage {
 visibility：hidden; 
 height：0px; 
 width：0px; 
} 
  

I did some research and found it could be hard to style a input type=file. However, I realized youtube has a beautiful button displayed when you want to upload your video to the site. (may need login: http://www.youtube.com/upload).
so basically it allows user to click the button, pick a file, and do the upload.
I am not sure how this is implemented instead of using the ugly <input> tag? Or anyone knows any alter good way to make a beautiful file upload interface?

解决方案

LIVE DEMO

<button id="imageDrop" onclick="document.getElementById('uploadImage').click()" title="Click or Drag Image">Upload image</button>

<input id="uploadImage" type="file" />

#imageDrop{      
  background:#fff;
  width:300px;
  height:180px;
  font-size:20px;
  font-style:italic;
  border-radius:18px;
  border:2px dashed #444;
}

#uploadImage{
  visibility: hidden;
  height:0px;
  width: 0px;
}

这篇关于如何在html中设置输入类型=文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！