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 相关文章推荐
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
详解Vue中一种简易路由传参办法
Sep 15 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 Javascript
node express使用HTML模板的方法示例
Aug 22 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音乐采集(部分代码)
2007/02/14 PHP
PHP中MD5函数使用实例代码
2008/06/07 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
ThinkPHP视图查询详解
2014/06/30 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
Python处理中文标点符号大集合
2018/05/14 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
python爬虫之遍历单个域名
2019/11/20 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
Python进行特征提取的示例代码
2020/10/15 Python
python调用百度API实现人脸识别
2020/11/17 Python
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
新郎父亲婚宴答谢词
2014/01/11 职场文书
2014新年寄语
2014/01/20 职场文书
协议书模板
2014/04/23 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
数学教师个人总结
2015/02/06 职场文书
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫