造型文件上传按钮

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

<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>

我已经看到了很多问题，非常像我的，但我无法找到一个解决方案。也许我不能将它们应用于我的代码。不知道如何使用标签，因为我创建一个后显示为文本，我无法像按钮一样设计它。此外，我将<input type="file" id="upload-photo" name="files[]"的不透明度更改为0后，空白处保留空白。任何建议都会有所帮助。在此先感谢。

来源

2016-09-07 Niki Karaolis

检查这个片段

你需要做的是提供了输入字段和风格的标签，因为这将是一个按钮

#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>

来源

2016-09-07 08:39:27

我将它作为我的其他按钮设计，可以正常工作，但标签不断显示为文本。 @Hitesh Misro –

@NikiKaraolis你可以发表你的问题吗？ –

在这里，即使php不在小提琴中工作。 https://jsfiddle.net/dredby5u/1/#&togetherjs=nao7twFLtT，但奇怪的是，浏览行为就像一个小提琴中的按钮。这是什么意思，我的服务器有问题，或者？ @Hitesh Misro –

，你可以做这样的

的Html

<div class="box"> 
<input type="file" name="file-1[]" id="file-1" class="inputfile inputfile-1" data-multiple-caption="{count} files selected" multiple style="display: none;" /> 
<label for="file-1"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>Choose a file&hellip;</span></label> 
</div>

的CSS

.box { 
    background-color: #dfc8ca; 
    padding: 6.25rem 1.25rem; 
} 

.js .inputfile { 
    width: 0.1px; 
    height: 0.1px; 
    opacity: 0; 
    overflow: hidden; 
    position: absolute; 
    z-index: -1; 
} 
button, input { 
    line-height: normal; 
} 
button, input, select, textarea { 
    font-family: inherit; 
    font-size: 100%; 
    margin: 0; 
} 

inputfile-1 + label { 
    color: #f1e5e6; 
    background-color: #d3394c; 
} 
.inputfile + label { 
    max-width: 80%; 
    font-size: 1.25rem; 
    font-weight: 700; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    cursor: pointer; 
    display: inline-block; 
    overflow: hidden; 
    padding: 0.625rem 1.25rem; 
} 

svg:not(:root) { 
    overflow: hidden; 
} 

.inputfile-1 + label { 
    color: #f1e5e6; 
    background-color: #d3394c; 
} 
.inputfile + label { 
    max-width: 80%; 
    font-size: 1.25rem; 
    font-weight: 700; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    cursor: pointer; 
    display: inline-block; 
    overflow: hidden; 
    padding: 0.625rem 1.25rem; 
}

这里演示链接https://jsfiddle.net/7we705q1/5/

来源

2016-09-07 08:00:20

可能会奏效，但不知道如何将它连接到我的php代码。@ Fahran Dharsi –

它是如此简单，你可以在php代码中使用html格式 –

造型文件上传按钮

回答

相关问题