JS Modify the style of the file control

<style type= "Text/css" >
Body
{
font-size:14px;
}
Input
{
Vertical-align:middle;
margin:0;
padding:0;
}
. File-box
{
position:relative;
width:340px;
padding-top:20px;
}
. txt
{
height:22px;
border:1px solid #cdcdcd;
width:180px;
}
. btn
{
Background-color: #FFF;
border:1px solid #CDCDCD;
height:24px;
width:70px;
}
. file
{
Position:absolute;
top:0;
right:5px;
height:24px;
Filter:alpha (opacity:0);
opacity:0;
width:260px;
padding-top:20px;
padding-left:100px;
}
</style>

<div class= "File-box" >
<form id= "Impor" method= "POST" action= "" >
Select File: <input type= ' text ' name= ' TextField ' id= ' textfield ' class= ' txt '/>
<input type= ' button ' class= ' btn ' value= ' Browse ... '/>
<input type= "File" Name= "FileData" class= "file" accept= "application/vnd.ms-excel"
Id= "Filefield" size= "onchange=" document.getElementById (' TextField '). Value=this.value "/>
</form>
</div>

<div style= "padding-top:30px" >
<a id= "im" href= "#" class= "Easyui-linkbutton" data-options= "iconcls: ' Icon-redo '"
Onclick= "Importexcel ();" > Import </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a id= "Ca" href= "#"
class= "Easyui-linkbutton" data-options= "iconcls: ' Icon-cancel '" onclick= "Cancelimport ();" > Cancel </a>
</div>

Ajax submits form forms: note: jquery.form.js and jquery-1.8.0.min.js must be referenced

function Importexcel () {

$.messager.progress ({text: ' The document is uploading, please later ... ‘ });
$ ("#impor"). Ajaxsubmit ({
Type: "POST",
Url:actionimport + "Import",
Success:function (data) {
JSON = eval ("(" + Data + ")");
if (json.success) {
$.messager.progress (' close ');
$.messager.alert ("Import Prompt", "Import Success", ' info ');
Return

}
else {
$.messager.progress (' close ');
$.messager.alert ("Import hint", "Import Failed", ' info ');

Return
}
},
Error:function (data) {

$.messager.alert (' fetch hint ', ' Import failed ', ' info ');

}
}
);

}

JS Modify the style of the file control