angularjs中$http异步上传Excel文件方法


Posted in Javascript onFebruary 23, 2018

1.文件上传框html代码如下

<form id="fileForm" enctype="multipart/form-data">
 <button id="import_asset" type="button" ng-click="import_asset()">上传文件</button>
 <input id="file_asset" type="file" style="display: none;"/>
</form>

*注意: 设置form的enctype属性值为:multipart/form-data

2:js代码如下:

$scope.import_asset = function () {
 $("#file_asset").click();
};
$("#file_asset").on("change", function(){
 var formData = new FormData();
 var file = document.getElementById("file_asset").files[0];
 if(file.name){
  var fileName = file.name.substring(file.name.lastIndexOf(".") + 1);
  if(fileName =="xlsx" || fileName =="xls"){
   formData.append('file', file);
   $http({
    method:"post",
    url:commonService.projectName + "/so/assetmanage/upload",
    data:formData,
    headers : {
     'Content-Type' : undefined
    },
    transformRequest : angular.identity
   }).then(function (response) {
    if(response.status == 200){
     alert("文件上传成功!!!");
    }else{
     alert("文件上传失败!!!");
    }
   });
  }else{
   alert("文件格式不正确,请上传以.xlsx,.xls 为后缀名的文件。");
   $("#file_asset").val("");
  }
 }
});
Javascript 相关文章推荐
javascript实现的动态添加表单元素input,button等(appendChild)
Nov 24 Javascript
关于递归运算的顺序测试代码
Nov 30 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
深入理解Vuex 模块化(module)
Sep 26 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
web前端vue filter 过滤器
Jan 12 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
Dec 09 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 #Javascript
Vue父组件调用子组件事件方法
Feb 23 #Javascript
vue实现密码显示隐藏切换功能
Feb 23 #Javascript
对vue.js中this.$emit的深入理解
Feb 23 #Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 #Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 #jQuery
vue中动态绑定表单元素的属性方法
Feb 23 #Javascript
You might like
PHP 高手之路(二)
2006/10/09 PHP
php获得当前的脚本网址
2007/12/10 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
Python爬虫爬验证码实现功能详解
2016/04/14 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
opencv 阈值分割的具体使用
2020/07/08 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
UNIX命令速查表
2012/03/10 面试题
小学生新年寄语
2014/04/03 职场文书
疾病捐款倡议书
2014/05/13 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
生日答谢词
2015/01/05 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python