javascript - Re-select and upload the same file - Stack Overflow

admin管理员组

文章数量:1279147

You cannot re-select and upload the same file except in Firefox, which mistakenly allows you to do so:

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

Here's my approach to resolve the issue. I wonder if there's a neater way to achieve it.

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

On JSFiddle: /

Explanation:

You cannot re-select the same file twice in a row, i.e. you select and upload foo.txt on your desktop, for example, and then click the file chooser again, file select dialog appears and you try to select the same file again -- the browser simply does nothing and no alert box appears.

You cannot re-select and upload the same file except in Firefox, which mistakenly allows you to do so:

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

Here's my approach to resolve the issue. I wonder if there's a neater way to achieve it.

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

On JSFiddle: http://jsfiddle/scMF6/2/

Explanation:

You cannot re-select the same file twice in a row, i.e. you select and upload foo.txt on your desktop, for example, and then click the file chooser again, file select dialog appears and you try to select the same file again -- the browser simply does nothing and no alert box appears.

• javascript
• html
• file-upload

Share Improve this question Follow edited Jun 14, 2014 at 7:25 asked Jun 8, 2014 at 5:15 user648340user648340 18

• 6 Mind explaining the issue you're trying to solve better? I have no idea what you're trying to achieve. – Fabrício Matté Commented Jun 8, 2014 at 5:25
• 2 Are you sure? I'm getting a change event on Chrome and IE as well. AFAIK file inputs' .onchange works pretty much on any browser. – Fabrício Matté Commented Jun 8, 2014 at 5:43
• 3 I need to explain more: you cannot reselect/reupload the same file, i.e. if you choose a file, you cannot choose it again -- it simply does nothing. – user648340 Commented Jun 8, 2014 at 5:48
• 2 In my opinion, "Upload the same file" implies that you're submitting/sending the same file twice. In your case, you're selecting it before submission. – Fabrício Matté Commented Jun 8, 2014 at 5:59
• 3 There is no question in this question. – AD7six Commented Jun 13, 2014 at 18:10

 |  Show 13 more ments

3 Answers 3

Sorted by: Reset to default 3

Thanks for idea! If some one use GWT, then you can use this code)

     ...//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 = '';
    }-*/;

Your solution has one problem, after selecting a file when you click it second time it clears the file input. Now if user does not select a new file and cancels Browse pop up then his old selection is gone.

This is not the default behavior of file input in FF.

I guess if you have some handle or callback for upload then you should clear your file input in that.

you must initialize "change event" after "click event":

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

本文标签： javascriptReselect and upload the same fileStack Overflow