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 parseInt字符转化为数字函数使用小结
Nov 05 Javascript
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
js中的屏蔽的使用示例
Jul 30 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
jQuery替换textarea中换行的方法
Jun 10 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
react 原生实现头像滚动播放的示例
Apr 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
php安全开发 添加随机字符串验证,防止伪造跨站请求
2013/02/14 PHP
php更新修改excel中的内容实例代码
2014/02/26 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
javascript 动态添加表格行
2006/06/22 Javascript
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
python从ftp下载数据保存实例
2013/11/20 Python
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
机电一体化自荐信
2013/12/10 职场文书
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
初中教师业务学习材料
2014/05/12 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android