Google <input type= ' file ' > change only responds to 1 resolutions and changes in style

In the project process encountered the need to upload local files, file's original control is not very beautiful, but this control and button a little bit different,

The idea of changing this style is to set a layer of links outside the control, and the file control's transparency to 0 (transparent). the style only needs to operate on the outer layer.

HTML code:

<TD style= "Text-align:left;" >
<a href= "javascript:;" class= "File" > select files
<input type= "file" Name= "fi" id= "F" >
</a>
</td>

CSS code:

. File {
position:relative;
Display:inline-block;
Background:rgb (146, 174);
border:0px Solid RGB (146, 174);
border-radius:4px;
padding:4px 12px;
Overflow:hidden;
color: #fff;
Text-decoration:none;
text-indent:0;
line-height:20px;
}
. File Input {
Position:absolute;
font-size:100px;
right:0;
top:0;
opacity:0;
}

：

Since the click Select File Change event responds only once, that is, the same file name of the file or the same file after the modification does not refresh the page when you click Submit will not respond again.

If the Click event is used here, you will need to click Submit and then click Select File to take effect. Here I looked at a lot of ways, in the Google Browser, the value of the file control can only be set to NULL, otherwise it will be an error.

So the idea here is to set the value of file to null each time you click. after testing, this problem was solved.

JS Code:

function Choosefile () {
$ ("#f"). Live (' click ', Function (e) {
$ ("#f"). Val ("");
});//file is the change based on the Val in the space. Google Explorer can only set the file Val to empty, set to other values will be error, so here to add a click event
$ ("#f"). Live (' Change ', function (e) {
var selectedfile = document.getElementById ("f"). Files[0];
var name = Selectedfile.name;
$ ("#filename"). Val (name);
var reader = new FileReader ();
Reader.readastext (selectedfile, "GBK");
reader.onload = function () {
$ ("#script_content"). Val (this.result);
$ ("#script_result"). Val ("");
}
});
}

This is my use of the process of some of the solutions, if there are errors please light spray, thank you!

Google <input type= ' file ' > change only responds to 1 resolutions and changes in style