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 相关文章推荐
js change,propertychange,input事件小议
Dec 20 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
Apr 08 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
Jun 19 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
javascript表单事件处理方法详解
May 15 Javascript
Three.js快速入门教程
Sep 09 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
vue自定义一个v-model的实现代码
Jun 21 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
JavaScript中的相等操作符使用详解
Dec 21 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
PHP4实际应用经验篇(7)
2006/10/09 PHP
用php和MySql来与ODBC数据连接
2006/10/09 PHP
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
jquery显示隐藏input对象
2014/07/21 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
python基础教程之循环介绍
2014/08/29 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
python中的常量和变量代码详解
2018/07/25 Python
Python和Bash结合在一起的方法
2020/11/13 Python
python飞机大战游戏实例讲解
2020/12/04 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
国税会议欢迎词
2014/01/16 职场文书
项目考察欢迎辞
2014/01/17 职场文书
员工培训协议书
2014/09/15 职场文书
工作失职检讨书500字
2014/10/17 职场文书
暑假生活随笔
2015/08/15 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang