xxx.module.ts模块 
import { NgModule} from “@angular/core”; 
import { FileUploadModule } from “ng2-file-upload” ; 
import { XXXComponent } from “./xxx.component”;

@NgModule({ 
imports:[ 
FileUploadModule 
], 
declarations:[ 
XXXComponent ,/component,pipe,directive/], 
providers:[] 
}) 
export class XXXModule{}

xxx.component.ts组件 
import { Component} from “@angular/core”; 
import { FileUploader} from “ng2-file-upload/file-upload/file-uploader.class”;

@Component({ 
templateUrl:’xxx.component.html’ 
})

export class XXXComponent{ 
constructor(){ } 
public fileList; 
public uploadFile(event){ 
this.fileList = event.target.files; 
}

//上传 
public submitUploadFile(){ 
if(this.fileList.length>0){ 
let file:File = this.fileList[0]; 
let formData = new FormData(); 
formData.append(‘file’,file,file.name); 
let headers = new Headers(); 
headers.append(‘Accept’,’application/json’); 
let options = new RequestOptions({headers:headers}); 
this.http.post(url,formData,options) 
.map(res=>res.json()) 
.catch(error=>Observable.throw(error)) 
.subscribe(

//返回上传数据
  • 1
//success or fail
  • 1
)
  • 1
  • 2



}

xxx.component.html 

angularjs 上传相关推荐

  1. 使用AngularJS上传文件

    本文翻译自:File Upload using AngularJS Here is my HTML form: 这是我的HTML表单: <form name="myForm" ...

  2. angularjs上传文件到服务器,AngularJS - 上传文件( Upload File)

    AngularJS - 上传文件( Upload File) 我们提供了上传文件的示例. 为了开发这个应用程序,我们使用了HTML,CSS和AngularJS. 以下示例显示了如何使用AngularJ ...

  3. AngularJs 上传文件到服务器

    现在项目中需要运用到AngularJs,其中用到AngularJs中上传文件功能,借此,记录下,怎样运用AngularJs中的组件.首先,去下载一个叫ng-file-upload的插件.下载地址:ht ...

  4. angularjs上传文件到服务器,AngularJS:如何使用multipart表单实现简单的文件上传?...

    直接发送文件更有效. 该Base64编码的Content-Type: multipart/form-data增加了额外的33%的开销.如果服务器支持它,则直接发送文件更有效:$scope.upload ...

  5. angularJS 上传multipart/form-data

    var fd = new FormData();fd.append('file', vm.file);CommodityViewImport.post(fd, onSaveSuccess, onSav ...

  6. oracle asp.net上传 下载 文件大小只有32kb,asp默认上传大小

    asp.net 上传大文件大小控制方案 .NET默认允许上传4M的文件. 修改 Machine.config 文件,改动MaxRequestLength 参数的值.在c:\winnt\microsof ...

  7. angularjs php上传文件,AngularJS 文件上传 的功能你了解的多少?几分钟就让你了解angularjs的文件上传...

    本篇文章主要的讲述了angularjs的文件上传功能,大家又不懂都可以来看,希望能帮助到大家.下面就让我们一起来看这篇文章吧 问题描述附件上传 检定结果以附件形式上传. 这里先不考虑api. 实现的任 ...

  8. AngularJS PrimeNG 上传文件 进度条

    AngularJS PrimeNG 上传文件 进度条 1.思路: 2.父页面代码实现: 3.子页面代码实现 1.思路: 使用p-progressBar,创建一个新画面,浮在p-fileUpload组件 ...

  9. angularjs结合plupload实现文件上传

    转载注明:(罗志强的博客) angularjs的指令directive非常好使,可以很方便的结合各种插件,实现很强大的功能. 今天用到了plupload,就拿它举例吧. 正常的plupload用法应该 ...

最新文章

  1. 家长学校.net keti.html,家长学校教科研的工作制度
  2. python返回unicode_Python 中通过 unicode 码返回单字符的函数是 ,返回单字符 unicode 码的函数是 。_学小易找答案...
  3. webpage not available是什么意思_MySQL很想啊,为什么还要有noSQL?
  4. 选择云备份:应当怎样和云供应商签合同
  5. 在c语言中函数的定义变量的值为,变量定义(C语言中变量的声明和定义)
  6. 软件配置管理(六)常用配置软件配置工具指令
  7. vue 项目构建失败 Unhandled rejection Error 的原因 sass解析异常
  8. 木兰编程语言重现——支持列表操作,演示编辑器高亮
  9. java 判断是否整数倍_java怎样实现判断一个最高达1000位数字的整数是不是3的倍数。...
  10. Facebook 公开 APT32 身份,疑为越南本地一家 IT 公司
  11. java 路由器接口的作用是什么_路由器的接口和用途
  12. SSM项目-山东医院-可行性配置-1
  13. 【EOS】1.环境搭建
  14. 用X264编码以后的H264数据
  15. win10硬盘根目录下出现msdia80.dll解决办法
  16. net系统安全开发手册
  17. 【超详细分析】关于三次握手与四次挥手面试官想考我们什么?
  18. 使用Python进行并发编程
  19. 类似华为麒麟鸿蒙类的名字,华为除了“麒麟”,还有四款顶级芯片,名字背后隐藏寓意令人感动...
  20. 单片机C语言数据存储原理,介绍单片机中C语言的数据存储与程序编写

热门文章

  1. 8086除法指令DIV,IDIV
  2. 《DBNotes:Join算法的前世今生》
  3. LeetCode 530. 二叉搜索树的最小绝对差 思考分析
  4. 【视觉项目】【day3】8.22号实验记录(利用canny检测之后的来进行模板匹配)
  5. 关系代数基本运算_关系代数的基本和附加运算
  6. 利用xor给shellcode加壳
  7. golang实现聊天室(四)
  8. C++ 多态之纯虚函数和抽象类01
  9. 操作系统【三】内存管理基础+连续内存分配
  10. 3_V1-类和对象 -- 默认成员函数