2017-12-27 344 views
-1

我試圖創建一個調用「文件」類型輸入事件的按鈕,以便輸入本身不顯示,並且我可以按照this後的樣式設置按鈕的樣式。形式看起來像這樣:「.click();」觸發器「onchange」

<form action="imageUpload.php" method="post" enctype="multipart/form-data" > 
    <input type="file" id="selectedImage" style="display: none;" onchange="this.form.submit()" /> 
    <button onclick="document.getElementById('selectedImage').click();" /> 
</form> 

當我點擊該按鈕,fileselect對話彈出,但文件被採摘前的「imageUpload.php」已經被調用。但是,當我通過刪除按鈕並顯示輸入本身來取出中間人時,它按預期工作:在選擇文件後調用「imageUpload.php」。

我假設「.click();」函數觸發「onchange」,即使值沒有改變。它是否正確?有沒有辦法在不立即調用onchange的情況下從另一個按鈕觸發文件選擇對話框?或者有沒有辦法來檢查文件是否在onchange中被選中?

在此先感謝。

+1

使用按鍵的按鍵式按鈕時,是在表單中。無類型按鈕的默認操作是提交表單。還要注意,'button'不是自閉的,結束標籤是強制性的。 – Teemu

+0

這裏是https://jsfiddle.net/0423vd6f/ – RohitS

回答

1

提交<button>的默認類型。

在你鏈接的例子中,他們指定了這樣的按鈕:<button type="button">。通過給它一個這樣的類型,表單不會被提交。

請參見:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

+0

謝謝!這正是問題所在,我不知道默認的「按鈕」會提交表單。看起來像一個奇怪的設計選擇,但我想這簡直就是HTML。 – Ikeaner

0

注:這只是爲了說明的目的。您必須根據需要修改代碼。當表單提交可能會顯示錯誤,因爲我們發佈到一些隨機的網址。

所以,讓我們試着打破這個:

function showFile(){ 
 
    // lets trigger the file click as its hidden. 
 
    document.getElementById('fileControl').click(); 
 
} 
 

 

 
function sub(){ 
 
// check if your user has selected any file? 
 
if(document.getElementById('fileControl').files.length > 0){ 
 
// if you are curius to see your files log this 
 
//console.log(document.getElementById('fileControl').files); 
 
// do post your form here by 
 
    document.getElementById('testForm').submit(); 
 
} 
 
}
<!-- Change the action URL to what you want--> 
 
<form method="post" action="example.com" id="testForm"> 
 
<!-- Lets have hidden file control that calls the some method to submit form--> 
 
<input type="file" id="fileControl" onchange="sub();" style="display:none;"> 
 
<!-- Lets have a button to open file dialog--> 
 
<input type="button" id="btn" value="open" onclick="showFile();"> 
 
</form>