$(function(){
let file;
//上传点击事件
$('#btn').bind('click', function(){
let val = $('#fb').filebox('getText');
if(!val){
return alert('未选择任何文件!')
}
let reg = /\.(xlsx|xls)/i;
if(reg.test(val)){
let formData = new FormData();
formData.append("upfile", file); //upfile 后台接收的参数名
$.ajax({
url: '', //url地址,向后台请求的,该是什么写什么
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
beforeSend: function(xhr) {
if (accesstoken && username && userid) {//用户信息,一般记录是session里面
xhr.setRequestHeader("AccessToken",
accesstoken);
xhr.setRequestHeader("username", username);
xhr.setRequestHeader("userid", userid);
}
},
success: function (res) {
if(!res || res.hasError && res.error.indexOf('请重新登录') >= 0){
$UToolNoCache();//清楚缓存的封装方法,需要的自己写逻辑
return;
}
if(res && res.hasError){
return alert(`上传失败:<br/> ${res.error}`);
}else{
return alert('上传成功!');
}
},
error: function (res) {
console.log(res);
return alert('请求发送失败!');
}
}); }else{
$('#fb').filebox('setText','');
return alert('请选择正确的Excel文件!');
}
});
//文件判断
$(':file').change(function(){
file = this.files[0];
// let name = file.name;
// let size = file.size;
let type = file && file.type;
if(type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' && type !== 'application/vnd.ms-excel'){
                   return alert('此处应选择Excel文件!');
        }
});
});

Excel文件上传功能实现的更多相关文章

  1. [SAP ABAP开发技术总结]客户端文本文件、Excel文件上传下载

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  2. [SAP ABAP开发技术总结]文本文件、Excel文件上传下传

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  3. iOS 的 Safari 文件上传功能详解

    iOS 6 给 Safari 浏览器带来的另外一个功能是文件上传,终于 Safari 终于支持 input 输入框的文件类型了,并且还支持 HTML媒体捕获(HTML Media Capture). ...

  4. [php基础]PHP.INI配置:文件上传功能配置教程

    昨天分享了在PHP网站开发中如何在php.ini中配置实现session功能的PHP教程,今天继续分享在利用PHP实现文件上传功能时几点关键php.ini的配置. 说到在php.ini中的文件上传的配 ...

  5. 达到HTTP合约Get、Post和文件上传功能——采用WinHttp介面

    于<采用WinHttp实现HTTP协议Get.Post和文件上传功能>一文中,我已经比較具体地解说了怎样使用WinHttp接口实现各种协议. 在近期的代码梳理中,我认为Post和文件上传模 ...

  6. 学习ASP.NET Core Razor 编程系列十五——文件上传功能(三)

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  7. 学习ASP.NET Core Razor 编程系列十四——文件上传功能(二)

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  8. django之 文件上传功能(缺陷:无法改存放目录)

    百度云盘:django之 文件上传功能(缺陷:无法改存放目录)

  9. 文件/大文件上传功能实现(JS+PHP)全过程

    文件/大文件上传功能实现(JS+PHP) 参考博文:掘金-橙红年代 前端大文件上传 路漫漫 其修远 PHP + JS 实现大文件分割上传 本文是学习文件上传后的学习总结文章,从无到有实现文件上传功能, ...

随机推荐

  1. HDU 1560 DNA sequence(DNA序列)

    HDU 1560 DNA sequence(DNA序列) Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K  ...

  2. IOS高级开发之多线程(四)NSOperation

    1.什么是NSOperation,NSOperationQueue? NSOperation是一个抽象的基类,表示一个独立的计算单元,可以为子类提供有用且线程安全的建立状态,优先级,依赖和取消等操作. ...

  3. Nginx 504 Gateway Time-out分析及解决方法

    一.场景还原php程序在执行抓取远程图片库并保存至本地服务器的时候,出现了“504 Gateway Time-out”错误提示. 问题定位:由于图片巨多,所以下载时间很长(10分钟以上),引起网关超时 ...

  4. CSS之垂直水平居中方法

    //居中方法1 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 346px; height ...

  5. java native用法

    说明: native关键字说明其修饰的方法是一个原生态方法,方法对应的实现不是在当前文件,而是在用其他语言(如C和C++)实现的文件中.Java语言本身不能对操作系统底层进行访问和操作,但是可以通过J ...

  6. LInux 些许知识

    1.Linux下去掉^M的方法 ①dos2unix filename ②sed -i 's/^M//g' filename #注意:^M的输入方式是 Ctrl + v ,然后Ctrl + M 2.so ...

  7. 使用js实现放大镜效果

    点击预览放大镜效果,图片比较大,因为需要精细的图片去凸显放大的效果,请耐心 可以通过滑轮控制放大倍数,由于图片太大 如果放大镜没有出现 可刷新一下网页

  8. dedecmsV5.7和discuz!X3.4整合之后免激活登陆

    问题:dedecmsv5.7和discuz!X3.4整合之后,从dede过去的用户,第一次登陆discuz!X3.4,需要激活.后来我就上百度了一番,找到了一个方法 我找到的方法: 1.在dedecm ...

  9. redist命令操作(一)--键key,字符串String

    1.Redis 字符串(String) 参考菜鸟教程:http://www.runoob.com/redis/redis-strings.html 设置指定key的值,如果原来有,覆盖 127.0.0 ...

  10. Element-ui上传文件(删除、添加、预览)

    先看下效果是不是你所需要的.... 上传文件进度条后续会加上的.... 功能需求:默认为上传状态 1.未上传:点击可上传文件 2.已上传:点击可上传文件 (1).鼠标移入[删除] (2).鼠标点击[预 ...