前端js webuploader上传(导入)excel文件

时间：2024-03-01 11:33:38

项目开发中用到导入(上传)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

相关文章