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的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
JavaScript iframe的相互操作浅析
Oct 14 Javascript
JS仿flash上传头像效果实现代码
Jul 18 Javascript
js中 关于undefined和null的区别介绍
Apr 16 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 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获取url字符串截取路径的文件名和扩展名的函数
2010/01/22 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
PHP中phar包的使用教程
2017/06/14 PHP
javascript 命名空间以提高代码重用性
2008/11/13 Javascript
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
js变换显示图片的实例
2013/04/16 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
JavaScript中的this机制
2016/01/30 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
Python实现八皇后问题示例代码
2018/12/09 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
Pandas的数据过滤实现
2021/01/15 Python
优衣库台湾官网:UNIQLO台湾
2019/02/01 全球购物
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
C语言面试题
2013/05/19 面试题
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
政府采购方案
2014/06/12 职场文书
单位婚育证明范本
2014/11/21 职场文书
Python实现智慧校园自动评教全新版
2021/06/18 Python