HTML <INPUT TYPE = '文件'>文件選擇事件

103

比方說，我們有這樣的代碼：HTML <INPUT TYPE = '文件'>文件選擇事件

<form action='' method='POST' enctype='multipart/form-data'> 
    <input type='file' name='userFile'><br> 
    <input type='submit' name='upload_btn' value='upload'> 
</form>

導致此：

image showing browse and upload button

當用戶點擊「瀏覽...'按鈕，打開文件搜索對話框：

image showing a file search dialog box with a file selected

用戶將通過雙擊文件或單擊「打開」按鈕來選擇文件。

是否有Javascript事件可以在選擇文件後通知我？

來源

2010-08-20 Moon

129

收聽更改事件。

input.onchange = function(e) { 
    .. 
};

來源

2010-08-20 05:21:41 Anurag

我們會在腳本標記中寫入腳本標記 – Moon 2010-08-20 05:34:06

，或者您可以將其添加爲屬性（''），儘管這是不建議。 – Anurag 2010-08-20 05:52:10

請注意，在IE7和8中，'change'事件不會冒泡到表單事件。你需要把你的聽衆放在標籤上。 – xer0x 2011-07-20 18:07:28

當您必須重新加載文件時，您可以擦除輸入的值。下次你添加一個文件時，'on change'事件會觸發。

document.getElementById('my_input').value = null; 
//^that just erase the file path but do the trick

來源

2015-02-02 09:24:32 Clem

工作正常，但要注意奇怪的IE <11行爲。它不允許你改變輸入的值，所以很可能你需要一個解決方法。 http://stackoverflow.com/questions/9011644/how-to-reset-clear-file-input – 2016-03-13 21:53:10

jQuery的方式：

$('input[name=myInputName]').change(function(ev) { 

    // your code 
});

來源

2016-02-13 19:03:49 Zanon

即使你點擊取消更改事件被稱爲..

來源

2017-01-26 15:34:44 anthony

它會幫助，如果你會提供一些代碼來解釋你的答案，因爲沒有改變事件中提到的問題代碼片段 – DevDig 2017-01-26 15:42:51

這是我用純JS所採取的方式：

var files = document.getElementById('filePoster'); 
 
var submit = document.getElementById('submitFiles'); 
 
var warning = document.getElementById('warning'); 
 
files.addEventListener("change", function() { 
 
    if (files.files.length > 10) { 
 
    submit.disabled = true; 
 
    warning.classList += "warn" 
 
    return; 
 
    } 
 
    submit.disabled = false; 
 
});

#warning { 
 
    text-align: center; 
 
} 
 

 
#warning.warn { 
 
\t color: red; 
 
\t transform: scale(1.5); 
 
\t transition: 1s all; 
 
}

<section id="shortcode-5" class="shortcode-5 pb-50"> 
 
    <p id="warning">Please do not upload more than 10 images at once.</p> 
 
    <form class="imagePoster" enctype="multipart/form-data" action="/gallery/imagePoster" method="post"> 
 
     <div class="input-group"> 
 
    \t  <input id="filePoster" type="file" class="form-control" name="photo" required="required" multiple="multiple" /> 
 
\t  <button id="submitFiles" class="btn btn-primary" type="submit" name="button">Submit</button> 
 
     </div> 
 
    </form> 
 
</section>

來源

2018-01-02 12:51:53 developer

HTML <INPUT TYPE = '文件'>文件選擇事件

回答

相關問題