Повторно выберите и загрузите тот же файл

Вы не можете повторно выбрать и загрузить тот же файл, кроме Firefox, что по ошибке позволяет это сделать:

<input type="file" id="fileChooser">
document.getElementById('fileChooser').onchange = function () {
    alert('Uploaded!');
};

Вот мой подход к решению проблемы. Интересно, есть ли более быстрый способ добиться этого.

<input type="file" id="fileChooser">
var fileChooser = document.getElementById('fileChooser');
fileChooser.onclick = function () {
    this.value = '';
};
fileChooser.onchange = function () {
    if (this.value) {
        alert('Uploaded!');
    }
};

В JSFiddle: http://jsfiddle.net/scMF6/2/

Объяснение:

Вы не можете повторно выбрать один и тот же файл дважды в строке, т.е. вы выбрали и загрузили foo.txt на свой рабочий стол, например, а затем снова щелкните по выбору файла, появится диалоговое окно выбора файла, и вы попытаетесь выбрать тот же файл снова - браузер просто ничего не делает, и окно предупреждения не появляется.

Ответ 1

Спасибо за идею! Если кто-то использует GWT, вы можете использовать этот код)

     ...//some code :)
     Event.setEventListener(btn, new EventListener() {    
           @Override
           public void onBrowserEvent(Event event) {
           //work with IE11+ and other modern browsers
           nativeClearFile(fileUpload.getElement());
           //throw event click 
           InputElement.as(fileUpload.getElement()).click();
           }
          });
    Event.sinkEvents(btn, Event.ONCLICK);
    ...//continue code :)

    private native void nativeClearFile(Element element) /*-{
        element.value = '';
    }-*/;

Ответ 2

У вашего решения есть одна проблема, после выбора файла, когда вы нажмете его второй раз, он очистит ввод файла. Теперь, если пользователь не выберет новый файл и не отменит всплывающее окно, его старый выбор не будет.

Это не поведение по умолчанию ввода файлов в FF.

Я предполагаю, что если у вас есть дескриптор или обратный вызов для загрузки, вы должны очистить свой файл.

Ответ 3

вы должны инициализировать "событие изменения" после "события клика":

 var fileChooser = document.getElementById('fileChooser');
    fileChooser.onclick = function () {
        this.value = '';
        fileChooser.onchange = function () {
            if (this.value) {
                alert('Uploaded!');
            }
        };
    };