前端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