<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="">
选择文件：<input type=‘text‘ name=‘textfield‘ id=‘textfield‘ class=‘txt‘ />
<input type=‘button‘ class=‘btn‘ value=http://www.mamicode.com/‘浏览...‘ />
<input type="file" name="FileData" class="file" accept="application/vnd.ms-excel"
id="fileField" size="28" onchange="document.getElementById(‘textfield‘).value=http://www.mamicode.com/this.value" />
</form>
</div>

<div style=" padding-top:30px">
<a id="im" href="http://www.mamicode.com/#" class="easyui-linkbutton" data-options="iconCls:‘icon-redo‘"
onclick="importExcel();">导入</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a id="ca" href="http://www.mamicode.com/#"
class="easyui-linkbutton" data-options="iconCls:‘icon-cancel‘" onclick="cancelImport();">取消</a>
</div>

//ajax提交form表单：注意：必须引用jquery.form.js和jquery-1.8.0.min.js

function importExcel() {

$.messager.progress({ text: ‘文档正在上传，请稍后。。。‘ });
$("#impor").ajaxSubmit({
type: "POST",
url: actionImport + "Import",
success: function (data) {
json = eval("(" + data + ")");
if (json.success) {
$.messager.progress(‘close‘);
$.messager.alert("导入提示", "导入成功", ‘info‘);
return;

}
else {
$.messager.progress(‘close‘);
$.messager.alert("导入提示", "导入失败", ‘info‘);

return;
}
},
error: function (data) {

$.messager.alert(‘提取提示‘, "导入失败", ‘info‘);

}
}
);

}

js修改file控件的样式