標籤不起作用

Question

我有這樣的代碼：

.hidden_element { 
 
    height: 1px; 
 
    width: 1px; 
 
    overflow: hidden; 
 
}

<form action=""> 
 
    <label for="file"> 
 
    <button type="button" class="button red">Choose File</button> 
 
    </label> 
 
    <div class="hidden_element"> 
 
    <input type="file" name="video" id="file" /> 
 
    </div> 
 
</form>

問題是，當我點擊選擇文件沒有任何反應。

Answer 1

更改按鈕像<button type="button" onclick="document.getElementById('file').click()" class="button red">Choose File</button>

.hidden_element { 
 
    height: 1px; 
 
    width: 1px; 
 
    overflow: hidden; 
 
}

<form action=""> 
 
    <label for="file"> 
 
    <button type="button" onclick="document.getElementById('file').click()" class="button red">Choose File</button> 
 
    </label> 
 
    <div class="hidden_element"> 
 
    <input type="file" name="video" id="file" /> 
 
    </div> 
 
</form>

Answer 2

標籤元素僅適用於一個輸入：由於其具有一個作爲一個孩子（按鈕是輸入元素），它適用於而不是像你所希望的那樣輸入文件。

只要刪除按鈕，也許用一個跨度替換它，然後按照你的意願設置它，然後單擊標籤將打開文件選取器。沒有JavaScript需要！ :)

.hidden_element { 
 
    height: 1px; 
 
    width: 1px; 
 
    overflow: hidden; 
 
} 
 
.button { 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
    border: 1px solid #aaa; 
 
    background-image: linear-gradient(to bottom, #eee, #ccc); 
 
    padding: 0.1em 0.2em; 
 
    cursor: pointer; 
 
}

<form action=""> 
 
    <label for="file"> 
 
    <span class="button red">Choose File</span> 
 
    </label> 
 
    <div class="hidden_element"> 
 
    <input type="file" name="video" id="file" /> 
 
    </div> 
 
</form>

Answer 3

我不認爲把按鈕作爲標籤的目的。使用按鈕或提交來處理您的輸入（文件上傳）。你不應該隱藏你的'輸入文件'標籤。你真的需要兩件事情給用戶：'輸入文件'標籤，允許用戶選擇他想上傳的文件，然後通過提交表單或者ajax調用來執行一個動作。但是，由於您剛學習這個過程，因此我建議您僅執行一個簡單的提交操作，並將代碼寫入後端，以處理上傳文件。這裏是我的html代碼示例：

<form method="post" action="uploadFile.php"> 
 
\t <input type="file" name="video" id="file" /> 
 
\t <br /><br /> 
 
\t <input type="submit" value="upload file"> 
 
</form>