简单的html网页图片上传,10个有用的HTML文件上传技巧

bVcKjJI

上传文件的能力是许多Web和移动应用的关键需求,从将照片上传到社交媒体上到将简历发布到工作门户网站上,文件上传无处不在。

作为一名Web开发人员,我们一定知道HTML提供了原生文件上传的支持,并借助于JavaScript的一点帮助。在HTML5中,File API被添加到DOM中。利用它,我们可以读取 FileList 和其中的 File 对象,这就解决了文件的多种用例,即在本地加载文件或通过网络发送到服务器进行处理等。

在本文中,我们将讨论HTML文件上传支持的10种用法,希望你觉得它有用。

在任何时候,如果您想使用这些文件上传功能,都可以在这里找到:

该演示的源代码在我的Github存储库中,✋请随时关注我,并通过示例不断更新代码,如果您觉得有用,请给一个⭐。

1.单个文件上传

我们可以将输入类型指定为 file,以在Web应用程序中使用文件上传器功能。

输入文件类型使用户可以通过按钮上传一个或多个文件,默认情况下,它允许使用操作系统的本地文件浏览器上传单个文件。

上传成功后,File API 可以使用简单的JavaScript代码读取 File 对象。要读取 File 对象,我们需要监听文件上传器的 change 事件。

首先,通过ID获取文件上传器实例const fileUploader = document.getElementById('file-uploader');

然后添加一个 change 事件侦听器,以在上传完成后读取文件对象,我们从 event.target.files 属性获取上传的文件信息。fileUploader.addEventListener('change', (event) => {

const files = event.target.files;

console.log('files', files);

});

在浏览器控制台中观察输出,注意 FileList 数组中的 File 对象拥有上传文件的所有元数据信息。

1460000038169299

下面是相同示例的代码页,供您进一步研究

单个文件上传

上传文件,并在浏览器控制台中查看输出。

const fileUploader = document.getElementById('file-uploader');

fileUploader.addEventListener('change', (event) => {

const files = event.target.files;

console.log('files', files);

const feedback = document.getElementById('feedback');

const msg = `File ${files[0].name} uploaded successfully!`;

feedback.innerHTML = msg;

});

2.多文件上传

我们可以一次上传多个文件。为此,我们只需要在输入文件标签中添加一个名为 multiple 的属性即可。

现在,文件浏览器将允许您上传一个或多个要上传的文件。就像前面的例子一样,你可以添加一个 change 事件处理程序来捕获上传文件的信息。您是否注意到 FileList 是一个数组?对,对于多个文件上传,数组将具有以下信息:

1460000038169298

下面是CodePen链接,用于探索多个文件上传。

多文件上传

上传多个文件并在浏览器控制台中查看输出

const fileUploader = document.getElementById('file-uploader');

fileUploader.addEventListener('change', (event) => {

const files = event.target.files;

console.log('files', files);

// show the upload feedback

const feedback = document.getElementById('feedback');

const msg = `${files.length} file(s) uploaded successfully!`;

feedback.innerHTML = msg;

});

3.了解文件元数据

每当我们上传一个文件时,File 对象都有元数据信息,如文件名、大小、最后更新时间、类型等,此信息对于进一步的验证和决策很有用。// 通过id获取文件上传者

const fileUploader = document.getElementById('file-uploader');

// 监听 change 事件并读取元数据

fileUploader.addEventListener('change', (event) => {

// 获取FileList数组

const files = event.target.files;

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值