'input [type=file], after the file is imported, modify the original file, import it again without refreshing the page, or display the original file

question, as shown in figure

the html code is as follows:

<span class="button"><input type="file" id="file" name="file" onchange="this.parentNode.nextSibling.value = this.value"></span><input type="text" placeholder="Excel" id="input-filePath" readonly>

using the above method, upload the file, after the file is imported, modify the original file (note that the file path and file name remain unchanged before and after the file is modified), import the page without refreshing, or display the original file.
refer to the method mentioned in js to clear the value of input file , the html, of reinitializing file will become, and the selected files in the form will also be removed.
just want to make the file file become a newly selected file (note that before and after modifying the file, the file path and file name remain the same), the form still shows the selected file, is there any good way?

Feb.27,2021

switch the type attribute value of input [type = 'file'] back and forth, refer to https://www.cnblogs.com/web-w.

achieved the desired effect.


onchange= "this.parentNode.nextSibling.value = this.value"
do not understand why this

Menu