造型文件上传按钮 [英] Styling a file-upload button

问题描述

我正在创建一个简单的文件上传网站。这是我的代码：

 < form action =method =postenctype =multipart / form -data> 
< input type =fileid =upload-photoname =files []multiple =multipleaccept =image / */> 
< button type =submitvalue =Upload！>上传< / button> 
< / form> 
  

我看到很多类似于我的问题，但找不到解决方案。也许我不能将它们应用于我的代码。不知道如何使用标签，因为我创建一个它显示为文本，我不能像一个按钮样式。在我更改< input type =fileid =upload-photoname =files []的不透明度后，任何建议将是有益的。
在此先感谢。

解决方案

检查此片段

你需要做的是为输入字段和样式提供一个标签，因为它会是一个按钮

 ＃upload-photo {height：0; width：0;}＃upload-photo-label {border：1px solid #cccccc; padding：5px 30px; FONT-FAMILY：宋体; font-size：13px;}＃upload-photo-label：active {background：#ccc;}  

 < form action =method =postenctype =multipart / form-data> < input type =fileid =upload-photoname =files []multiple =multipleaccept =image / */> < label id =upload-photo-labelfor =upload-photo>浏览< / label>上传< / button>< / form>  

I am creating a simple file-upload web. This is the code that i have:

    <form  action="" method="post" enctype="multipart/form-data">
    <input type="file"  id="upload-photo" name="files[]" multiple="multiple" accept="image/*"/>
<button type="submit" value="Upload!">Upload</button>
</form>

I've seen a lot questions pretty much like mine but I couldn't find a solution. Maybe I can't apply them to my code. Not sure how to use labels cause after I create one it appears as text and I am not able to style it like a button. Also a piece of space stays blank, after i change the opacity of the <input type="file" id="upload-photo" name="files[]" to 0.Any advice would be helpful. Thanks in advance.

解决方案

Check this snippet

What you need to do is to provide a label for the input field and style as it would be a button

#upload-photo {
    height: 0;
    width: 0;
}

#upload-photo-label {
    border: 1px solid #cccccc;
    padding: 5px 30px;
    font-family:arial;
    font-size: 13px;
}
#upload-photo-label:active{
    background:#ccc;
}

<form action="" method="post" enctype="multipart/form-data">
  <input type="file"  id="upload-photo" name="files[]" multiple="multiple" accept="image/*"/>
  <label id="upload-photo-label" for="upload-photo">Browse</label>
  <button type="submit" value="Upload!">Upload</button>
</form>

这篇关于造型文件上传按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！