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+CSS 实现的超Sexy下拉菜单
Jan 17 Javascript
juery框架写的弹窗效果适合新手
Nov 27 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
vue组件命名和props命名代码详解
Sep 01 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 27 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计算十二星座的函数代码
2012/08/21 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
javascript基本类型详解
2014/11/28 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
python列表的常用操作方法小结
2016/05/21 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
Python 图片处理库exifread详解
2021/02/25 Python
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
中海讯通笔试题
2015/09/15 面试题
八年级音乐教学反思
2014/01/09 职场文书
赔偿协议书范本
2014/04/15 职场文书
《春雨》教学反思
2014/04/24 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
拾金不昧感谢信
2015/01/21 职场文书
市场部岗位职责
2015/02/12 职场文书