前端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
前端js webuploader上传(导入)excel文件的更多相关文章
- Apache POI 一键上传(导入excel文件到数据库)
import cn.XXXX.bos.utils.PinYin4jUtils; import org.apache.commons.lang3.StringUtils; // HSSF:操作07版本之 ...
- 上传读取Excel文件数据
/// <summary> /// 上传读取Excel文件数据 /// 来自http://www.cnblogs.com/cielwater /// </summary> // ...
- ci框架读取上传的excel文件数据
原文链接: https://blog.csdn.net/qq_38148394/article/details/87921373 此功能实现使用到PHPExcel类库,PHPExcel是一个PHP类库 ...
- 前端js图片上传
前端js图片上传,原理用input type="file"获取图片然后把图片转换成base64编码传到后台. 图片上传 <!DOCTYPE html><html& ...
- java 解析上传的Excel文件
java poi解析上传的Excel文件 package com.zhl.push.Utils; /** * @Author TAO * @ClassName ExcelData * @Descrip ...
- .NET 客户端上传本地excel文件到服务器上,并在客户端显示
// 上传按钮 protected void btnUp_Click(object sender, EventArgs e) { bool b = Upload(fuExcel); // 上传exce ...
- 利用django如何解析用户上传的excel文件
https://www.jb51.net/article/119452.htm 前言 我们在工作中的时候,会有这种需求:用户上传一个格式固定excel表格到网站上,然后程序负债解析内容并进行处理.我最 ...
- webUploader上传大视频文件相关web.config配置
在webuploader上传大文件时必须配置一下,不然请求后台处理程序时,会请求超时.出现404! <system.web> <httpRuntime maxRequestLengt ...
- springMVC从上传的Excel文件中读取数据
示例:导入客户文件(Excle文件) 一.编辑customer.xlsx 二.在spring的xml文件设置上传文件大小 <!-- 上传文件拦截,设置最大上传文件大小 10M=10*1024*1 ...
随机推荐
- Android Compose的Window Insets
Android Compose的Window Insets 除了app的内容区域外, 还有一些其他的固定元素会显示在手机屏幕上, 顶部的状态栏, 刘海, 底部的导航栏, 还有输入法键盘, 它们都是系统 ...
- django之mysqlclient安装
如果运行环境中没有安装mysqlclient,在迁移数据库时会发生错误 一.在windows下安装: ·如果直接使用 pip install mysqlclient 会提示安装失败(版本不对或者找不到 ...
- 使用require.context实现前端工程自动化
require.context是什么 一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多 ...
- 「NOI十联测」深邃
「NOI十联测」深邃 要使得最大的连通块最小,显然先二分答案. 先固定1结点为根. 对于一个果实,显然是先处理子树中未分配的点,再向外延伸. 每个结点记录一个\(si[]\),表示子树中未分配的点数, ...
- AT2650 [ARC077C] guruguru
可以发现,如果我们枚举每个理想亮度 \(X\) 然后再求在这个理想亮度情况下的答案是非常难维护的. 不妨反过来,考虑每个位置 \(i, i + 1\) 之间对每个理想亮度 \(X\) 减少次数的贡献. ...
- Mac系统如何显示隐藏文件
Command+Shift+. 可以显示隐藏文件.文件夹,再按一次,恢复隐藏:finder下使用Command+Shift+G 可以前往任何文件夹,包括隐藏文件夹.
- JavaScript多元运算符
JavaScript多元运算符 JavaScript多元运算符 **实例:**` function test(9){ var a=4,b=11; return p > 1 ? p<b ...
- JS 中的GB2312转UTF8和UTF8转GB2312
转载请注明来源:https://www.cnblogs.com/hookjc/ JS:encodeURI encodeURI(URIString)必选的 URIString 参数代表一个已编码的 UR ...
- 如何修改TOMCAT的默认主页为你自己项目的主页
感谢作者:xxs673076773 原文链接:https://www.iteye.com/blog/xxs673076773-1134805 (最合适的) 最直接的办法是,删掉tomcat下原有Roo ...
- Java泛型T与?
感谢大佬:http://m.mamicode.com/info-detail-2657551.html 一.区别 单独的T 代表一个类型 ,而 Class<T>代表这个类型所对应的类, C ...