2024年最新10个对web开发人员有用的HTML文件上传技巧(1)，网络前端面试知识

2401_84616533

于 2024-05-14 21:03:52 发布

阅读量1.1k

点赞数 7

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84616533/article/details/138870151

版权

程序员专栏收录该内容

106 篇文章 0 订阅

订阅专栏

下面是我在学习HTML和CSS的时候整理的一些笔记，有兴趣的可以看下：

HTML、CSS部分截图

进阶阶段

进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。

JS 内容涉及到的知识点较多，看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学，我是不建议的，毕竟刚接触 JS 谁能看得下去，当时我也不能，也没那样做。

我这部分的学习技巧是，增加次数，减少单次看的内容。就是说，第一遍学习 JS 走马观花的看，看个大概，去找视频以及网站学习，不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。

然后通过一些网站的小例子，开始动手敲代码，一定要去实践、实践、实践，这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点，眼高手低可不是个好习惯，我在这吃过亏，你懂的。

1、JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

JavaScript部分截图

2、前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

以 Vue 为例，我整理了如下的面试题。

Vue部分截图

const reader = new FileReader();

fileUploader.addEventListener(‘change’, (event) => {

const files = event.target.files;

const file = files[0];

reader.readAsDataURL(file);

reader.addEventListener(‘load’, (event) => {

const img = document.createElement(‘img’);

imageGrid.appendChild(img);

img.src = event.target.result;

img.alt = file.name;

});

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/zYBvdjZ

6.验证文件大小

如果用户上传图片过大，为了不让服务器有压力，我们需要限制图片的大小，下面是允许用户上传小于 1M 的图片，如果大于 1M 将上传失败。

fileUploader.addEventListener(‘change’, (event) => {

// Read the file size

const file = event.target.files[0];

const size = file.size;

let msg = ‘’;

// 检查文件大小是否大于1MB

if (size > 1024 * 1024) {

msg = <span style="color:red;">The allowed file size is 1MB. The file you are trying to upload is of ${returnFileSize(size)}</span>;

} else {

msg = <span style="color:green;"> A ${returnFileSize(size)} file has been uploaded successfully. </span>;

}

feedback.innerHTML = msg;

});

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/pobjMKv

7. 显示文件上传进度

更好的用户体验是让用户知道文件上传进度，前面我们用过了FileReader以及读取和加载文件的事件。

const reader = new FileReader();

FileReader还有一个progress 事件，表示当前上传进度，配合HTML5的progress标签，我们来模拟一下文件的上传进度。

reader.addEventListener(‘progress’, (event) => {

if (event.loaded && event.total) {

// 计算完成百分比

const percent = (event.loaded / event.total) * 100;

// 将值绑定到 progress标签

progress.value = percent;

}

});

在这里插入图片描述

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/eYzpwYj

8. 怎么上传目录上传?

我们可以上传整个目录吗?嗯，这是可能的，但有一些限制。有一个叫做webkitdirectory的非标准属性(目前只有谷歌浏览器还有Microsoft Edge支持按照文件夹进行上传)，它允许我们上传整个目录。

目前只有谷歌浏览器还有Microsoft Edge支持按照文件夹进行上传，具体可以看下百度云盘的网页版的上传按钮，在火狐下就支持按照文件进行上传，而在谷歌和Edge下，就会给用户提供一个下拉，让用户选择是根据文件进行上传还是根据文件夹进行上传。

用户必须需要确认才能上传目录

在这里插入图片描述

用户单击“上传”按钮后，就会进行上传。这里要注意的重要一点。 FileList数组将以平面结构的形式包含有关上载目录中所有文件的信息。对于每个File对象，webkitRelativePath属性表示目录路径。

例如，上传一个主目录及其下的其他文件夹和文件：

在这里插入图片描述

现在，File 对象将将webkitRelativePath填充为：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YKjJFSPF-1605056544261)(/img/bVcH6Hp)]

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/dyXYRKp

9. 拖拽上传

不支持文件上传的拖拽就有点 low 了，不是吗?我们来看看如何通过几个简单的步骤实现这一点。

首先，创建一个拖放区域和一个可选的区域来显示上传的文件内容。

Drag & Drop an Image

DROP HERE

Your image to appear here…

通过它们各自的ID获取dropzone和content 区域。

const dropZone = document.getElementById(‘drop-zone’);

const content = document.getElementById(‘content’);

添加一个dragover 事件处理程序，以显示将要复制的内容的效果:

dropZone.addEventListener(‘dragover’, event => {

event.stopPropagation();

event.preventDefault();

event.dataTransfer.dropEffect = ‘copy’;

});

在这里插入图片描述

接下来，我们需要一个drop事件监听器来处理。

dropZone.addEventListener(‘drop’, event => {

// Get the files

const files = event.dataTransfer.files;

});

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/ExyVoXN

10. 使用objectURL处理文件

有一个特殊的方法叫做URL.createobjecturl()，用于从文件中创建唯一的URL。还可以使用URL.revokeObjectURL()方法来释放它。

URL.revokeObjectURL() 静态方法用来释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。

fileUploader.addEventListener(‘change’, (event) => {

const files = event.target.files;

const file = files[0];

const img = document.createElement(‘img’);

imageGrid.appendChild(img);

img.src = URL.createObjectURL(file);

img.alt = file.name;

});

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/BazzaoN

总结

无论何时，如果你还想学习本文涉及的一些知识，你可以在这里尝试。

https://html-file-upload.netlify.app/

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader