Angular2里获取（input file）上传文件的内容的方法

2024-09-28 18:11:48

最近在用Angular2，需要有一个上传文件的功能，但是又不想用库，所以直接用原生的input file 标签。

<input type="file" id="newUpload" >

然后想获取上传的内容，于是先想了个愚蠢的方法，先通过id获取到这个input标签，然后再获取其中上传的内容

 const uploadsFile = document.getElementById(name).files[0];

结果就报错了。然后看提示说HTMLElement没有files方法。于是在es6里找了下有files属性的类型，是HTMLInputElement类型。于是就强制它转换成这个类型。

 const uploadsFile=<HTMLInputElement>document.getElementById(name).files[0];

结果还是不行，最后改成了先转换类型再调用属性就可以了。

  const uploadsFile = <HTMLInputElement>document.getElementById(name);
  const file = uploadsFile.files[0];

后面发现这种方式好像有点愚蠢，于是换了一个方法，用angular2里的$event来获取输入内容，里面也包括选择上传的文件。

 <input type="file" id="newUpload" (change)="getUpload(newUpload, $event)" >

选择的文件在event.target.files里

private getUpload(obj, e) {
  if (e.target.files[0]) {
   const file = e.target.files[0];
   obj.file = file;
  }
 }

接着就可以把它放到formdata里了

 const formData = new FormData();
  formData.append('file', this.upload.file);

最后清空选择上传的内容可以用

 let upload = <HTMLInputElement>document.querySelector(selectorName);
  upload.value = null;

不知道有没有更好的方法，欢迎讨论和指正。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

SpringMvc+Angularjs 实现多文件批量上传

SpringMvc代码 jar包 commons-fileupload commons-io spring-mvc.xml配置 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="defaultEncoding" value="UT
angularjs客户端实现压缩图片文件并上传实例

主要是利用html5的canvas来进行图片的压缩,然后转化为dataURL,再有dataURL转化为Blob文件,Blob对象可以直接赋值给Formdata. app.service('Util', function($q) { var dataURItoBlob = function(dataURI) { // convert base64/URLEncoded data component to raw binary data held in a string var byteString
Angular Js文件上传之form-data

前言:很久没更新博客,最近公司pc端技术选型用angular,这几天就赶鸭子上架,硬着头皮直接上手angular.其中有许多小坑陆陆续续踩起走.今天就遇到一个比较常见的问题:图片上传. 主题:图片上传服务器,然后通过服务器传阿里云. 不废话了直接贴前端代码: $http({ method: 'POST', url: '/wechatapp/User/setAvatar', data: data, headers: { 'Content-Type': undefined }, transformR
AngularJS向后端ASP.NET API控制器上传文件

本文实例介绍了前端AngularJS向后端ASP.NET Web API上传文件的实现方法,具体内容如下首先服务端: public class FilesController : ApiController { //using System.Web.Http [HttpPost] public async Task<HttpResponseMessage> Upload() { if(!Request.Content.IsMimeMultipartContent()) { this.Requ
Angularjs上传文件组件flowjs功能

现在的项目,无论代销,几乎不会缺省的一个功能就是上传下载功能,今天谈一谈使用AngularJS+bootsrtap下的上传下载功能. 1.angularjs和flowjs angularjs我在其他的博客里面也讲到了它的其他的一些用处,只是没有做过系统的说明,在这里也不打算一一介绍.这个在一些官网上都有说明,我也会花一点时间去整理一下angularjs的知识点以及在使用到angularjs需要注意的或者我在项目中碰到的一些问题,会在其他博客中跟大家分享.这里我只简单的一笔带过,主要是flowjs
基于AngularJS的拖拽文件上传的实例代码

随着HTML5的普及,现在大部分浏览器都支持拖拽功能,今天我们要说的就是实现一套拖拽上传的功能(Angularjs+nodejs). 一.首先前端这款插件是基于AngularJS的,下面我们来看主要代码. 引入js: <script src="js/angular.1.3.15.min.js"></script> <script src="js/ng-file-upload-shim.min.js"></script>
AngularJS 文件上传控件 ng-file-upload详解

网上可以找到的 AngularJS 的文件上传控件有两个: angular-file-upload:https://github.com/nervgh/angular-file-upload ng-file-upload:https://github.com/danialfarid/ng-file-upload 这两个非常类似,连js文件的结构都是一样的.核心的js是.min.js,还都有一个-shim.min.js,用来支持上传进度条和上传暂停等高级功能. 按道理讲shim.js应该是可加可不
学习使用AngularJS文件上传控件

前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件.并且规定文件格式和文件大小.因为前端框架使用angular,且不想因为一个上传功能又引入一个jquery,所以在网上查找基于angular的上传控件,因为angular还算比较新,貌似都没有太成熟的插件,网上的教程也大多是复制粘贴,总之没起倒多大的作用...但是皇天不负有心人,最后还是让我遇到了这个功能强大的插件,让我有种相见恨晚的感觉呀,依靠官方文档和师兄的帮助,终于搞清楚了基本的使用方法.好东
Angular2-primeNG文件上传模块FileUpload使用详解

近期在学习使用Angular2做小项目,期间用到很多primeNG的模块. 本系列将结合实战总结angular2-primeNG各个模块的使用经验. 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块本例中为: admin.module.ts import {FileUploadModule} from 'primeng/primeng'; @NgModule({ imports: [FileUploadModule] }) 在需要使用上传功能的组件的HT
AngularJS+Bootstrap实现多文件上传与管理

最近一个项目中需要实现多文件上传与管理,而项目是基于bootstrap开发的,所以查了一些bootstrap文件上传插件,最后发现还是bootstrap-fileinput最美观,该插件可以实现多文件的上传与管理(插件官方地址:http://plugins.krajee.com/file-input),具体的效果如下: (bootstrap-fileinput不局限于图片上传,也可以实现文件上传,但图片的缩略图容易辨识,这里就以图片上传为例) 该插件基本的操作可以参考:JS文件上传神器boots

Angular2里获取（input file）上传文件的内容的方法

相关推荐

随机推荐