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中的事件
Sep 23 Javascript
javascript自适应宽度的瀑布流实现思路
Feb 20 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 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 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
javascript面向对象之Javascript 继承
2010/05/04 Javascript
javascript使用activex控件的代码
2011/01/27 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
简化vuex的状态管理方案的方法
2018/06/02 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
python的即时标记项目练习笔记
2014/09/18 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
办公室前台的岗位职责
2013/12/20 职场文书
文化活动实施方案
2014/03/28 职场文书
机关会计岗位职责
2014/04/08 职场文书
《卖木雕的少年》教学反思
2014/04/11 职场文书
结婚纪念日感言
2015/08/01 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书