The change event of input [type = file] is not triggered.

The input [type = file] control is usually used to operate files on webpages, but the design of this control is quite painful. It does not trigger an event after selecting a file in other programming languages, but changes the above text, which may trigger the change event. If the selected text is not changed, the change event is not triggered.
When a file has been selected on the input [type = file] control and you click it again to select the same file, the change event will not be triggered. Because the text in the second selection is the same as that in the first selection, it has not changed. Another problem is that some browsers will automatically remember the text on the control. Even if the page is closed and re-opened, the original text will be restored. At this time, selecting files in the same path will not trigger the change event.
These problems are caused by the design of the input [type = file] control, which cannot be solved through common channels. It is recommended that the text of the input [type = file] control be cleared first, so that the change event can be triggered after the selected file is selected. However, in some browsers, the value of the input [type = file] control is read-only, so it is not easy to clear it. But here we can promote another solution for day stealing. Since the value cannot be written, why don't we create a new input [type = file] to replace the old one? In this way, the problem to be solved is the event binding. This can be solved by binding events to the container and then obtaining them through the bubble method without binding the events to the target element. The following is a pretty solution (because some compatible code is difficult to write, jquery is used here ):
Run <SCRIPT src = "http://code.jquery.com/jquery-1.10.2.min.js"> </SCRIPT>
<SCRIPT>
$ (Function (){
Form. Reset (); // clear the last record of the browser record
Var file;
$ (Form). On ("change", "# file", function (e ){
// Output the selected result
Console. Log (this. value );
// Save the old element in each selection and replace it with the new control.
$ (This). Clone (). replaceall (file = This );
}). Submit (function (){
// Replace the old elements saved before submission
$ ("# File"). replacewith (File );
});
});
</SCRIPT>
<Form ID = "form">
<Input type = "file" name = "file" id = "file"> <br/>
<Input type = "Submit"/>
</Form>