先从官网下载插件 http://www.uploadify.com/

引入之后。。。。

html....................

<!-- 上传 -->
<div id="certificate_importExcel" class="easyui-dialog" style="width: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!");
}
}

最新文章

  1. Linux 视频设备驱动V4L2最常用的控制命令
  2. 表连接,如何先筛选再 join
  3. WinPhone学习笔记(五)——LongListSelector
  4. Material Design - CollapsingToolbarLayout
  5. mysql 修改字符集
  6. Sqlstate解释
  7. JQUERY1.9学习笔记 之属性选择器(一) 前缀选择器
  8. deal with &#39;non-admin area&#39; warn
  9. ECharts一个强大的商业产品图表库
  10. 一个web应用的诞生--数据表单
  11. 引用类型-----Object
  12. 一键部署ETCD集群脚本
  13. [乐意黎原创] cuteftp 9 显示中文乱码
  14. 英语进阶系列-A04-英语升级练习二
  15. centos7项目部署
  16. 运维案例 | Exchange2010数据库损坏的紧急修复思路
  17. UserControl VS TemplatedControl
  18. MSSQL数据库后台进程(线程)
  19. 【转】DHCP工作过程详解
  20. 分享8款令人惊叹的HTML5 Canvas动画特效

热门文章

  1. Windows下Apache服务器中自动配置二级子域名
  2. C++ list的基本操作和使用
  3. [Liferay6.2]AUI表单验证示例
  4. ios 时间和毫秒数转换
  5. MySql数据库安装&amp;修改密码&amp;开启远程连接图解
  6. python图像卷积
  7. 使用wget
  8. 农资产品送货车上使用 PDA手持机 现场销售开单 然后开单后能直接通过移动网络传回电脑(云服务器)
  9. 单机c1000k连接
  10. BZOJ 2716 [Violet 3]天使玩偶 ——KD-Tree