首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在angular 4中获取上传文件的文件名、修改日期?

在Angular 4中,可以通过使用HTML的input元素和change事件来获取上传文件的文件名和修改日期。

首先,在HTML模板中添加一个input元素,设置type为file,并绑定change事件:

代码语言:html
复制
<input type="file" (change)="onFileSelected($event)">

然后,在组件的代码中,定义一个onFileSelected方法来处理change事件:

代码语言:typescript
复制
onFileSelected(event: any) {
  const file: File = event.target.files[0];
  const fileName: string = file.name;
  const lastModified: Date = new Date(file.lastModified);

  console.log('文件名:', fileName);
  console.log('修改日期:', lastModified);
}

在onFileSelected方法中,我们通过event.target.files0获取到选择的文件对象,然后可以使用File对象的name属性获取文件名,使用lastModified属性获取修改日期。注意,lastModified返回的是一个时间戳,需要使用Date对象进行转换。

这样,当用户选择文件后,就可以在控制台输出文件名和修改日期了。

关于Angular 4的更多信息和学习资源,你可以参考腾讯云的Angular开发文档:Angular开发文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

js获取input上传文件文件名和扩展名方法

使用 js 可以获取 input 上传文件文件名和扩展名,这里我整理一下具体方法: 1. 使用原生JS获取: CSS代码:给 div 一个内边距,按钮设置样式。...'mybtn');     var div = document.getElementById('div');     mybtn.onclick = function () {         //获取文件上传文件文件名和扩展名...;         } else {             //获取上传文件文件名             div.innerHTML= div.innerHTML+'文件名:' + myfile.files[0].name + '';             //获取上传文件扩展名             var filevalue...声明:本文由w3h5原创,转载请注明出处:《js获取input上传文件文件名和扩展名方法》 https://www.w3h5.com/post/89.html

13.1K00

VBA实用小程序70:获取压缩文件中指定文件修改日期

有时候,可能需要一个能够返回压缩文件(.zip文件)特定文件夹中某文件修改日期时间。当然,你可以将这个压缩文件解压缩,然后导航到该文件,查看其修改日期时间。...然而,使用几句VBA代码,就能快速获得指定文件修改日期时间。...下面是获取压缩文件中指定文件修改日期时间一个VBA自定义函数: Function ZipFDT(Z, F) As Date On Error Resume Next ZipFDT =CreateObject...参数F,用来指定压缩文件中要获取修改日期时间文件路径。...例如,在C盘中有一个名为FolderFile.zip压缩文件,该压缩文件中有一个名为Folder3文件夹,该文件夹中有一个名为folder3Myfile3.csv文件,我们要获取文件修改日期时间

1.5K20

何在前端下载后端返回文件流时,获取请求头中文件名称?

前言在前后端分离开发模式下,前端需要从后端获取文件流,以便进行文件下载。同时,前端还需要获取请求头中文件名称,以便为用户提供更加友好下载体验。...本文将介绍如何在前端下载后端返回文件流时,获取请求头中文件名称。2. 获取文件流前端可以通过发送请求方式获取后端返回文件流。...获取请求头中文件名称后端返回文件流时,通常会在响应头中设置 Content-Disposition 实体头字段,用于指定文件名称、类型等信息。...在前端下载文件时,可以通过获取响应头中 Content-Disposition 实体头字段,进而获取文件名称。...总结本文介绍了如何在前端下载后端返回文件流时,获取请求头中文件名称。

5.6K01

Ionic3 拍照上传

File Transfer 插件 upload方法 文件下载调用 File Transfer download方法 通过调用 Camera 插件getPicture方法获取照片 filePath...= this.file.externalApplicationStorageDirectory + 'Mac.png'; 这里为了测试方便写死了路径,代表设备下一个文件,这个文件名字叫做Mac.png...之后会写一篇文章专门介绍一个简单后台接口。 测试文件上传功能,因为在测试文件上传时候,需要访问设备原生功能,比如读取文件,因此需要在真机上调试。可是在真机上调试会又一个问题:无法查看日志。...在上面的代码中, 在拍照完成回调函数中,直接调用了 this.upload() 方法,该方法负责上传文件,所以在拍照完成后,就会直接将图片上传到服务器,同时图片展示在界面。...在本例中,图片是以 base64 形式上传,也可以用File URL形式上传文件

1K30

看看Angular有啥新玩法!手把手教你在Angular15中集成Excel报表插件

传统报表需要从浏览器下载之后再用Excel打开才能修改数据,那么,有没有一种插件可以实现直接在浏览器中修改Excel报表数据呢?答案是肯定。...下面将介绍如何在Angular15中集成Excel报表插件并实现简单文件上传和下载。 在本教程中,我们将使用node.js,请确保已安装最新版本。...Angular集成报表插件: 新建一个文件夹用来存放工作区代码(文件夹路径最好是英文)。 使用指令初始化Angular工程(用命令提示符CMD输入指令)。...\ \ \ (初始化上传、下载按钮) 在src/app/app.component.ts中添加上传、下载按钮方法: //上传文件代码 onFileChange...、下载按钮方法) 现在可以使用ng serve指令启动项目并在浏览器中测试上传文件修改文件内容和下载文件操作了。

28810

win10 uwp Markdown 输入需求文件文件格式文件类保存设置界面拼写检查云创建Html创建pdfGit

插入图片先放到本地,如果粘贴内容是文件,那么直接复制文件到文章同目录文件夹,文章文件夹名称和文章一样。复制进去需要修改文件名称为源文件名称+日期+随机数。...如果粘贴内容是图片,那么把图片转换为文件,同样放到文件夹,文件名日期+随机数。 在文本,插入图片格式为![图片描述](url)。如果URL不可用,可以重新上传。重新上传代码是(URL),根据本地文件获取文件,然后上传,代换URL。...新建 用户在输入新建文件标题后新建文件文件名为用户输入标题,去掉不能做文件名字符。如果存在相同文件名,那么加随机数。 如果用户选择Jekyll,那么自动在输入文件名加上日期。...--blog--> 博客标题: 创建日期: 修改日期: 标签: 作者: 文章和作者和创建时间、修改时间md5: < !

1.3K30

Django项目如何用富文本编辑器DjangoUeditor

如何使用DjangoUedit 安装好后,我们只需要在model里面修改需要使用此插件字段即可,文章内容字段,默认如下: body = models.TextField(default="",...imagePath :图片上传后保存路径,"images/",实现上传到"{{MEDIA_ROOT}}/images"文件夹。...: time :上传时间,datetime.datetime.now().strftime("%H%M%S") date : 上传日期,datetime.datetime.now().strftime...: 日 rnd : 三位随机数,random.randrange(100,999) basename : 上传文件名称,不包括扩展名 extname : 上传文件扩展名 filename : 上传文件名全称...里面的配置内容,因此,你可以去看config.json或者官方文档内容来决定 该如何配置upload_settings,基本上就是用来配置上传路径、允许上传文件扩展名、最大上传文件大小之类

2.2K20

CURL常用命令_db2常用命令

/www.centos.org 通过-o/-O选项保存下载文件到指定文件中: -o:将文件保存为命令行中指定文件名文件中 -O:使用URL中默认文件名保存文件到本地 1 # 将文件下载到本地并命名为...当下载一个文件时,可对该文件最后修改日期进行判断,如果该文件在指定日期修改过,就进行下载,否则不下载。...,这样可以保证在查看历史记录时不会将密码泄露 4 curl -u username URL 从FTP服务器下载文件 CURL同样支持FTP下载,若在url中指定是某个文件路径而非具体某个要下载文件名...,CURL则会列出该目录下所有文件名而并非下载该目录下所有文件 1 # 列出public_html下所有文件夹和文件 2 curl -u ftpuser:ftppass -O ftp://ftp_server...FTP服务器 通过 -T 选项可将指定本地文件上传到FTP服务器上 # 将myfile.txt文件上传到服务器 curl -u ftpuser:ftppass -T myfile.txt ftp://

71630

用VSCode开发一个asp.net core2.0+angular5项目(5): Angular5+asp.net core 2.0 web api文件上传

这部分就讲从angular5客户端上传图片到asp.net core 2.0 web api....上传单个文件需要使用IFormFile作为Action参数. 如果上传是多个文件, 那么应该使用IFormCollection. 这里我做是单文件上传, 所以使用IFormFile....为了防黑, 把文件名改成Guid, 后缀名不变. 然后使用FileStream创建该文件. 后边内容就是把文件名保存到数据库了. 接下来, 使用Postman来测试这个api....上传成功. 文件即出现在wwwroot下, 文件名也保存到了数据库. ?...首先创建一个修改photo service: 根据官方文档, 如果想要上传文件时显示进度, 那么应该使用HttpRequest, 并设置属性reportProgress为true: import { Injectable

2.9K50

PHP文件操作实例总结【文件上传、下载、分页】

'上传失败'; } 注意 php.ini 文件可以修改上传文件限制: 是否允许上传上传临时目录、文件最大限制、一次上传最大数量 1.3 防止文件被覆盖 1、我们在服务器端进行验证,在移动到目的地时候...,生成新文件名时,使用随机数命名,可以避免文件名重复 2、按日期保存文件夹 1.4 控制上传文件类型 一般需求是:.jpg .png .gif 格式图片 防止修改文件后缀然后上传,可以借助php...扩展 Finfo,更加精确获得文件类型 // 为了防止用户修改文件后缀,使用php一个扩展 Finfo 实现 # 1、开启php.ini 中php扩展 extension=php_fileinfo.dll...; } #防止上传文件被覆盖 $prefix = $this- _prefix; // 文件名唯一 $filename = uniqid($prefix,true...); //文件后缀,从上传文件名称中截取最后一个点后面的内容 strrchr $ext = strrchr($file['name'],'.'); //分目录保存上传文件,

1.1K30

django 字段类型_access数据库类型是

参数: auto_now:每次修改保存修改为当前日期时间,对于“最后修改” 时间戳有用。在使用Model.save()保存时有效,使用QuerySet.update() 时不会自动更新。...(13) FileField 文件上传字段,不支持primary_key参数,使用该参数时将引发错误。 有两个可选参数: upload_to:设置上传目录和文件名方法,并且可以通过两种方法进行设置。...将参数附加到MEDIA_ROOT路径中,已形成本地文件系统上将存储上传文件位置。 storage:一个存储对象,用于处理文件存储和检索。...l 存储在数据库中所有文件都是该文件路径(相对于MEDIA_ROOT)。如果ImageField调用了,则mug_shot可以使用来获取摸板中图像绝对路径。...如果在2007年1月15日上传文件,该文件将保存在目录/home/media/photos/2007/01/15中。 l FieldFile.name:文件名,包括相对路径。

3.8K30

Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)

前言:   上一篇文章我们讲了如何在创建Angular项目中快速引入ng-zorro-antd企业中台组件库,并且快速构建后台管理页面框架模板。...这一章主要介绍是如何在创建好后台管理页面框架快速生成NG-ZORRO相关组件,并且介绍Angular相关目录结构、生命周期函数,路由配置和使用相关知识点,以及如何使用Angular CLI使用一行代码快速添加...|-- angular.json // Angular配置文件 |-- browserslist // 配置浏览器兼容性文件 |-- karma.conf.js // 自动化测试框架Karma配置文件...修改项目默认调转页面,Angular应用多模块路由配置: 找到app-routing.module.ts文件,在【routes】对象中声明新模块路由,以及项目默认调转页面地址修改。 ?...2、配置首页组件路由(多模块路由完美解决): 首先,我们博客项目存在博客管理和用户管理两个核心模块,我们创建了两个模块,那么我们如何在【app-routing.module.ts】应用路由文件中配置多个模块路由

3.9K20

常在web漂,哪有不挨刀:curl独门绝技,不来学几招防身吗?

本文用实例深度演示 curl 详细用法。 ? 下载单个文件 下面的命令将获取URL内容并将其显示在STDOUT中(即在你终端上)。...-O(大写O)将采用URL中文件名,并将其用作存储结果文件名 curl -o gettext.html URL 现在,页面URL将保存在名为“gettext.html”文件中。...仅当文件在给定时间之前/之后被修改时才下载 我们可以使用curl中-z选项获取在特定时间之后修改文件。这对FTP和HTTP都有效。...上传文件到FTP服务器 cURL还可以用于通过-T选项将文件上传到FTP服务器。...还有一个黑魔法,就是“-”,使用管道处理,获取stdin信息流,并经由cURL上传到FTP服务器。

86520
领券