zoukankan      html  css  js  c++  java
  • jquery-uploadify 上传

    先从官网下载插件 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!");
    }
    }

  • 相关阅读:
    Vue3手册译稿
    捉虫日记 | MySQL 5.7.20 try_acquire_lock_impl 异常导致mysql crash
    window资源管理器无反应,右键转圈圈
    二、DHCP原理简介
    一、以太网协议
    FreeRTOS系统环境下,全局变量频繁同时在不同任务改写也可能导致硬件中断(HardFault)
    查找生成文件的进程
    解决docker容器无法访问宿主机网络的问题
    TiDB在更新版本的时候初始化Prometheus的配置文件失败
    好喜欢lodop的介绍
  • 原文地址:https://www.cnblogs.com/xiexy/p/3881353.html
Copyright © 2011-2022 走看看