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