Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Event binding on file upload

Is there a way to bind an event when a user selects a file to upload and clicks on "open", I want to trigger the event when the user has clicked on open.

enter image description here

like image 262
Uffo Avatar asked Apr 12 '13 15:04

Uffo


People also ask

What is the meaning of event binding?

An event binding is an XML definition that defines one or more business events to CICS®. An event binding consists of event specifications, capture specifications, and adapter information. You create an event binding in a CICS bundle project using the Event binding editor.

How can you tell if a file is canceled and clicked on input?

The property value type=”file” tells that the type of input the user enters is a file. The property value id=”theFile” is used to link the JavaScript code to it using getElementById() method. The property value onclick=”initialize()” is used to specify the function call when the user has clicked on the input.

What is event binding in JavaScript?

The event binding allows you to add an event handler for a specified event so that your chosen JavaScript function will be invoked when that event is triggered for the associated DOM element. This can be used to bind to any event, such as keypress , mouseover or mouseout .


1 Answers

In that scenario, the change event will be fired.

If you have this HTML:

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

Then use this JS:

window.onload = function () {
    document.getElementById("fileInput").onchange = function () {
        // this.value
    };
};

(with the option of using addEventListener/attachEvent instead of setting the onclick property)

Inside the handler, you can use this.value to get the file selected.

Of course, with jQuery, you can use:

$(document).ready(function () {
    $("#fileInput").on("change", function () {
        // this.value OR $(this).val()
    });
});

NOTE: The window.onload and $(document).ready handlers are used to make sure the element is available. Of course, this event can occur much later than actually necessary, since they wait for all elements on the page to be ready (and window.onload waits even longer for things like images to be loaded). An option is to bind the onchange handler immediately after the element on the page or at the end of the <body>.

like image 70
Ian Avatar answered Oct 25 '22 13:10

Ian