JavaScript技巧—检查文件大小等

发表于:2020-7-22 09:43

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:佚名    来源:今日头条

  在本文中,我们将看一些常见JavaScript问题的解决方案。
  JavaScript技巧—检查文件大小等
  使用JavaScript使窗口全屏显示
  我们可以使用全屏API使窗口全屏显示。
  例如,我们可以这样写:
  document.documentElement.requestFullscreen();
  我们只是调用 requestFullScreen 方法将窗口更改为全屏模式。
  然后,我们可以调用 document.exitFullScreen 退出全屏模式。
  将JavaScript NodeList转换为数组的最快方法
  我们可以使用扩展运算符(...)或 Array.from 方法将JavaScript NodeList转换为数组。
  例如,我们可以这样写:
  const els = Array.from(document.querySelectorAll('p'));
  我们可以通过以下方式使用传播运算符:
  const els = [...document.querySelectorAll('p')];
  每个单词的首字母大写
  我们可以使用一些数组方法将每个单词的首字母大写。
  例如,我们可以这样写:
str = str.toLowerCase()
.split(' ')
.map((s) => `${s.charAt(0).toUpperCase()}${s.substring(1)}`)
.join(' ');
  我们首先将字符串转换为小写,然后使用 split 拆分单词。
  然后我们调用 map 来匹配每个单词,使其首字母大写,其余小写。
  最后,我们调用 join 将单词重新组合在一起。
  JavaScript文件上传大小验证
  我们可以在不使用任何库的情况下验证文件的大小。
  例如,我们可以这样写:
  <input onchange="validateSize(this)" type="file">
  然后我们可以写:
const validateSize = (file) => {
const fileSize = file.files[0].size;
if (fileSize > 2 * (1024 ** 2)) {
console.log('File size exceeds 2 MB');
} else {
//...
}
}
  我们只是获得 file.files[0].size 属性来验证所选的第一个文件的大小。
  file 是文件输入。
  files 具有一个或多个选定文件。
  size 就是大小。
  将类添加到DOM元素
  要将类添加到DOM元素,我们可以使用 classList 属性的 add 方法。
  例如,我们可以这样写:
  const element = document.querySelector('div');
  element.classList.add('baz');
  我们得到了div元素,然后可以使用 classList 的 add 方法添加类名。
  使用%来进行模块运算
  % 运算符用于将一个数字的余数除以另一个。
  但我们也可以用它来得到一个数字mod另一个数字。
  例如,我们可以这样写:
  const mod = (m, n) => ((m % n) + n) % n;
  我们首先得到 m 除以 n 的余数。
  然后我们再加上 n ,使之成为正数。
  最后,我们得到该值除以 n 的余数 。
  并列N个数组的最有效方法
  我们可以使用 push 方法连接一个或多个数组。
  为此,我们可以编写:
  arr.push(...a, ...b)
  然后,来自 a 和 b 的所有项目将附加到 arr。
  我们还可以将 concat 与多个数组一起使用。
  例如,我们可以这样写:
  arr = arr.concat(array, array1, array2, array3);
  我们调用 concat,这样我们就把每个数组的条目放在 arr 的条目之后的新数组中。
  然后返回该数组。
  因此,我们必须把它分配给 arr,以更新它的返回值。
  根据属性值在DOM中查找元素
  我们可以基于属性值在DOM中找到一个元素。
  例如,我们可以这样写:
  const fileInput = document.querySelector("input[type=file]");
  我们通过使用 querySelector 获得文件输入。
  它接受任何CSS选择器,包括属性选择器。
  type 是属性,file 是值。
  我们也可以通过使用 querySelectorAll 得到一组具有相同选择器的元素。

本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理。
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号