先从官网下载插件 http://www.uploadify.com/
引入之后。。。。
html....................
<!-- 上传 -->
<div id="certificate_importExcel" class="easyui-dialog" style="450px;height:220px;padding:0px 20px;"
closed="true" >
<div style="margin-top:20px;">
<input id="file_upload" name="file_upload" type="file" multiple="true">
<a href="javascript:importExcelFile()">上传文件</a> | <a href="javascript:$('#file_upload').uploadify('stop')">停止上传!</a>
</div>
</div>
js...........
<script type="text/javascript">
$(document).ready(function(){
$('#file_upload').uploadify({
'progressData' : 'speed',
'swf' : '<%=basePath%>/static/uploadify/uploadify.swf',
'uploader' : '<%=path%>/cacertificate/importExcel.do',
'buttonText' : '选择文件',
'fileTypeExts' : '*.xls',
'auto' : false,
'fileObjName' : 'file',
'fileTypeDesc' : 'excel文件',
'onError' :function(){
$.messager.alert("确认","导入失败,请与管理员联系！");
$.messager.progress('close');
},
'onUploadSuccess' : function(file, data, response) {
if(data=="null"){
$.messager.alert("确认","未上传excel！");
}else if(data=="excel"){
$.messager.alert("确认","本导入只支持excel文件导入！");
}else if(data=="title"){
$.messager.alert("确认","excel文件格式不正确！");
}else if(data=="sucess"){
$.messager.alert("确认","导入成功！");
$('#certificate_info').datagrid('reload');
}
$.messager.progress('close');
}
});
$("#certificate_info").querygrid({
url:'tificate/query.do',
remoteSort: false,
//idField:'c_checkid',
custom:true,
iconCls:'icon-save',
nowrap:true,
striped:true,
collapsible:true,
pagination:true,
rownumbers:true,
fitColumns:true,
fit:true,
pageSize:15,
pageList:[15,20,30,100],
onLoadError:function(data){
$.messager.alert("加载提示",data.responseText);
},
frozenColumns:[[
{field:'ck',checkbox:true}
]],
columns:[[
{field:'c_id',title:'序号',align:'center'},
{field:'c_note',title:'备注',align:'center'}
]],
toolbar:[${current_ajaxclient_authority}]
toolbar:[{
id:'btncexp',
text:'导入',
iconCls:'icon-search',
handler:function(){
$("#certificate_importExcel").dialog('open').dialog('setTitle','上传');
}
}]
});
});
</script>
这样，点击导入按钮之后，通过$("#certificate_importExcel").dialog('open').dialog('setTitle','上传');
就会显示如下：
扩展：手动加遮罩层
function importExcelFile(){
var state=200;
var obj=$('#file_upload').data('uploadify').queueData.files;//获取选择的文件
for(var s in obj){
state=250;
}
if(state==250){
$.messager.progress({
title:'提示',
msg:'请稍等...',
interval:500,
text:'正在导入'
});
$('#file_upload').uploadify('upload', '*');//手动上传
}else{
$.messager.alert("确认","请选择一个excel！");
}
}