Capturing the close of the browse for file window with JavaScript

前端 未结 3 1613
我在风中等你
我在风中等你 2021-01-12 02:38

I am using infile to ask the users to browse for a file on their machine. Is there way to catch if the window is closed without file being selected?
For example if x i

相关标签:
3条回答
  • 2021-01-12 03:23

    What I did is: Start timer after the user opens the window, and in that timed function I check every 0.5 sec if the file has been selected with boolean var. I stop the timer as soon as user selects the file or HTML5 DnD occurs. I hope this helps someone.

    <div id="uploader"><input type="file" name="data" id="inFile" size="15" style="display:none" onchange="handleFiles(this)"/></div>
    
    <button dojoType="dijit.form.Button" id="fileSelect" type="button" onmouseup="browse();">Browse</button> 
    
    var fileselected = false;
    function handleFiles(input){
        fileselected = true;
    //use input
    }
    
    var interval;
    function browse(){
        fileselected = false;
        var fileElem = document.getElementById("inFile");
        fileElem.click();
        interval = setInterval(setdiv, 500);
    
    }
    function setdiv(){
        if(!fileselected){  
            //do staff until user decides to Dnd or  browse for file again
            clearInterval(interval);
        }   
    }
    
    0 讨论(0)
  • 2021-01-12 03:39

    I think the blur event will do it:

    <input
      type="file"
      onchange="changed=true; handleFiles(this)"
      onblur="if(!changed) alert('nothing selected'); changed=false;"
    />
    
    0 讨论(0)
  • 2021-01-12 03:42

    With the solution from HTML input file selection event not firing upon selecting the same file, I think you can use this:

    <input type="file" name="data" id="inFile" />
    
    var fileElem = document.getElementById("inFile");
    var fileSelected = null;
    fileElem.onclick = function(e) {
        fileSelected = this.value;
        this.value = null;
    });
    /* or use this in your browse() function:
        fileElem.value = null;
    */
    fileElem.onchange = function(e) { // will trigger each time
        handleFileDialog(this.value === fileSelected);
    };
    
    function handleFileDialog(changed) {
        // boolean parameter if the value has changed (new select) or not (canceled)
    }
    
    0 讨论(0)
提交回复
热议问题