CODEWITHSUNDEEP
javascriptjquerycsshtml
alyssaeliyah
alyssaeliyah

Reputation: 2244

Input type file event after select and open a file

I have this HTML code:

<input type="file" id="mysignature_upload" onChange="readURL();"/>

Javascript code:

function readURL(){
  alert("Hello");
}

The problem with this code is, the function readURL only gets called when you select a different file, but if you select the same file over and over again, readURL cannot be executed. I want to know if there's an event that fires when you select and open a file even if the file selected is the same with the previous file selected.

Here is the fiddle: http://jsfiddle.net/vhevhangvhakhikhang/78zcp5u7/

Upvotes: 3

Views: 9240

Answers (4)

IdahoB
IdahoB

Reputation: 737

When selecting large files, there is a noticeable delay between clicking Open in the file dialog and the value of the (type file) input updating. While I use the following two events for showing and hiding a 'please wait' dialog, you could 'do other stuff' in these events as well:

    // Fires upon click of the file input ('Choose File' button)
    $('#selectedFile').on('click', function (event) {
        // Shows before file selection dialog and remains behind
        // the file selection dialog (which has a higher z-order)
        ShowPleaseWait();
    });

    // Fires the moment that the file input value itself is updated.
    // NOTE: This is NOT when the Open button is clicked ... this
    // is when the value of the file input actually updates (there is
    // a delay after clicking Open for a large file until the value
    // of the input actually, finally, updates...)
    $('#selectedFile').on('change', function (event) {
        HidePleaseWait();
    });

Upvotes: 0

Deep Kakkar
Deep Kakkar

Reputation: 6305

<script>
    $(document).ready(function({
      $("#mysignature_upload").click(function(event){
         event.preventDefault();
         $(this).val("");
      });
    });
</script>

Upvotes: 3

ItayB
ItayB

Reputation: 11367

I hope its satisfies your requirements: fiddle exapmle

   <input type="file" id="mysignature_upload"/>

    $("#mysignature_upload").click(function (event) {
         $("#mysignature_upload").val("");
    });

    $("#mysignature_upload").on('change',function (event) {
        alert("selected file: " + $("#mysignature_upload").val());
    });

Upvotes: 4

Pramod Karandikar
Pramod Karandikar

Reputation: 5329

As the name suggests, onchange is triggered only if the value of the field is changed. If you need to do something every time the user selects a file, probably, you could reset the field's value on click event.

$("#mysignature_upload").click(function() {
  // clear the value
  $(this).val("");
 }
}

Now onchange will get triggered every time.

Upvotes: 2

Related Questions