「.click（）;」觸發器「onchange」

-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中被選中？

在此先感謝。

來源

2017-12-27 Ikeaner

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

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

提交<button>的默認類型。

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

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

來源

2017-12-27 19:01:44

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

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

所以，讓我們試着打破這個：

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>

來源

2017-12-27 19:45:07 RohitS

「.click（）;」觸發器「onchange」

回答

相關問題