用單獨上傳按鈕修改的輸入類型文件

Question

也許我的問題是重複的，但我嘗試了很多在這裏找到的答案，沒有成功。

在我的jsp頁面上，我有一個輸入類型文件，還有一個上傳按鈕，它會觸發上傳。事情是這樣的：

<div id="test_form"> 
<input type="file" id="file" style = "position:absolute; top:-100px;"> 
<button id="selectFileButton">Please choose file</button> 
</div> 
<button id="upload">Upload selected file</button> 

而一些JS：

$(document).ready(function() { 
    $("#selectFileButton").click(function() { 
     $("#file").click(); 
    }); 
}); 

，當我在「請選擇文件」按鈕，單擊時，顯示爲選擇一個新的窗口。但是，當我選擇文件，一切都消失了，所以我現在能夠擊中實際的「上傳」按鈕。 你能幫我嗎？

Answer 1

我所做的是製作一個帶有自定義佈局的div，並在其上面放置一個不可見的文件。這樣用戶實際上點擊文件上傳。如果你想顯示所選文件的名稱，你將需要一些JavaScript。

<div style="position: relative; width: 300px; height: 50px;"> 
    <div class="button" style="position: absolute;">Click me!</div> 
    <input type="file" style="float: left; opacity: 0; cursor: pointer;" /> 
</div> 

和一些JS：

$("input[type=file]").change(function(){ 
    $(this).siblings("div").eq(0).html($(this).val()); 
});