造型文件上傳按鈕

我正在創建一個簡單的文件上傳網站。這是我的代碼：造型文件上傳按鈕

<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格式 –

造型文件上傳按鈕

回答

相關問題