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 相关文章推荐
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 Javascript
中止javascript执行的方法
Feb 14 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
js密码强度检测
Jan 07 Javascript
AngularJs中route的使用方法和配置
Feb 04 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 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
模仿OSO的论坛(一)
2006/10/09 PHP
PHP中的CMS的涵义
2007/03/11 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
php常量详细解析
2015/10/27 PHP
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
jQuery Ajax文件上传(php)
2009/06/16 Javascript
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
Vue表单实例代码
2016/09/05 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
Python进程间通信之共享内存详解
2017/10/30 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
纠纷协议书
2014/04/16 职场文书
药店促销活动策划方案
2014/08/24 职场文书
甜品店创业计划书
2014/09/21 职场文书
工作失职造成投诉的检讨书范文
2014/10/05 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
python如何正确使用yield
2021/05/21 Python