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 cookies 设置、读取、删除实例代码
Apr 12 Javascript
AngularJS语法详解(续)
Jan 23 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
Jan 14 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
简单的三步vuex入门
May 20 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
浅谈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显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
php生成动态验证码gif图片
2015/10/19 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
js选项卡的实现方法
2015/02/09 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
Vue computed计算属性的使用方法
2017/07/14 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
2017/08/30 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python实现斐波那契递归函数的方法
2014/09/08 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
python开发之list操作实例分析
2016/02/22 Python
Python实现堆排序的方法详解
2016/05/03 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
树莓派实现移动拍照
2019/06/22 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
Django Admin设置应用程序及模型顺序方法详解
2020/04/01 Python
python爬虫请求头设置代码
2020/07/28 Python
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
医药营销专业个人自荐信
2013/09/29 职场文书
历史学专业推荐信
2013/11/06 职场文书
税务会计岗位职责
2014/02/18 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
升旗仪式主持词
2014/03/19 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书