zoukankan      html  css  js  c++  java
  • 前端js webuploader上传(导入)excel文件

    项目开发中用到导入(上传)Excel文件

    我使用的是百度的webuploader:

    1:下载:http://fex.baidu.com/webuploader/(官方下载/示例)

    2:使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF。

    <!--引入CSS-->
    <link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">
    
    <!--引入JS-->
    <script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>
    
    <!--SWF在初始化的时候指定,在后面将展示-->

    3:html部分

    <div id="uploader" class="wu-example">
    <div class="btns">
    <div id="picker" >上传</div>
    </div>
    </div>

    4:js部分

        var  state = 'pending';
        var uploader = WebUploader.create({
            auto: true, // 选择文件后自动上传,默认不自动上传需要触发
            swf: 'webuploader文件夹/Uploader.swf', // swf文件路径
            server: '/upload/normal', // 上传文件的接口(替换成你们后端给的接口路径)
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建,可能是input元素,也可能是flash.
            pick: '#picker',
            accept: {
                extensions: 'xls,xlsx', // 允许的文件后缀,不带点,多个用逗号分割,这里支持老版的Excel和新版的
                mimeTypes: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            },
            resize: false, // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
            duplicate :true //可重复上传
        });
    // 当有文件被添加进队列的时候
        uploader.on( 'fileQueued', function( file ) {
    
        });
    // 文件上传过程中创建进度条实时显示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            //可以自定义进度条
        });
    
        uploader.on( 'uploadSuccess', function( file ) {
           alert("已上传");
        });
    
        uploader.on( 'uploadError', function( file ) {
             alert("上传出错");
        });
    
        uploader.on( 'uploadComplete', function( file ) {
            
        });
    
        uploader.on( 'all', function( type ) {
            if ( type === 'startUpload' ) {
                state = 'uploading';
            } else if ( type === 'stopUpload' ) {
                state = 'paused';
            } else if ( type === 'uploadFinished' ) {
                state = 'done';
            }
        });

    挺好用的
    参照http://fex.baidu.com/webuploader/getting-started.html

  • 相关阅读:
    设计模式之依赖倒置原则
    设计模式之里氏替换原则
    设计模式之单一职责原则
    设计模式六大原则
    spring boot 搭建
    OSI(Open System Interconnect) 网络七层协议
    常用经济术语
    Spring Boot入门系列(十八)整合mybatis,使用注解的方式实现增删改查
    Spring Boot入门系列(十四)使用JdbcTemplate操作数据库,配置多数据源!
    Maven快速入门(三)Maven的坐标和仓库
  • 原文地址:https://www.cnblogs.com/zhoushuang0426/p/11338187.html
Copyright © 2011-2022 走看看