JS 文件互轉(zhuǎn)、10 個 HTML 文件上傳技巧、Web 用戶體驗設(shè)計提升指南、奇怪的知識——位掩碼 | 思否技術(shù)周刊
值班編輯：袁鈺涵
溫馨提示：本文包含大量外部鏈接，墻裂建議小伙伴們點擊 “閱讀原文“ 進(jìn)行閱讀。:)
今日分享提升工作幸福感的知識點，希望大家不要錯過這些好文~
1、JS 文件 base64、File、Blob、ArrayBuffer 互轉(zhuǎn)
二進(jìn)制互轉(zhuǎn)
1. file對象轉(zhuǎn)base64
let reader = new FileReader();
reader.readAsDataURL(file[0])
console.log(reader)
2. base64 轉(zhuǎn)成blob 上傳
function dataURItoBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], {type: mimeString});
}
3. blob 轉(zhuǎn)成ArrayBuffer
let blob = new Blob([1,2,3,4])
let reader = new FileReader();
reader.onload = function(result) {
console.log(result);
}
reader.readAsArrayBuffer(blob);
4. buffer 轉(zhuǎn)成blob
let blob = new Blob([buffer])
5. base64 轉(zhuǎn) file
const base64ConvertFile = function (urlData, filename) { // 64轉(zhuǎn)file
if (typeof urlData != 'string') {
this.$toast("urlData不是字符串")
return;
}
var arr = urlData.split(',')
var type = arr[0].match(/:(.*?);/)[1]
var fileExt = type.split('/')[1]
var bstr = atob(arr[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], 'filename.' + fileExt, {
type: type
});
}
文章地址：
https://segmentfault.com/a/1190000039310309
2、10 個 HTML 文件上傳技巧
上傳文件功能可以說是項目經(jīng)常出現(xiàn)的需求。從在社交媒體上上傳照片到在求職網(wǎng)站上發(fā)布簡歷，文件上傳無處不在。在本文中，我們將討論 HTML文件上傳支持的10種用法，希望對你有用。
1. 單文件上傳
我們可以將input 類型指定為file，以在Web應(yīng)用程序中使用文件上傳功能。
<input type="file" id="file-uploader">
input filte 提供按鈕上傳一個或多個文件。默認(rèn)情況下，它使用操作系統(tǒng)的本機文件瀏覽器上傳單個文件。成功上傳后，F(xiàn)ile API 使得可以使用簡單的 JS 代碼讀取File對象。要讀取File對象，我們需要監(jiān)聽 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);
});
在控制臺中觀察輸出結(jié)果，這里關(guān)注一下FileList數(shù)組和File對象，該對象具有有關(guān)上傳文件的所有元數(shù)據(jù)信息。
如果大家看到這里，有點激動，想手賤一下，可以 CodePen 玩玩，地址：
https://codepen.io/atapas/pen/rNLOyRm
2. 多文件上傳
如果我們想上傳多個文件，需要在標(biāo)簽上添加 multiple 屬性：
<input type="file" id="file-uploader" multiple />
現(xiàn)在，我們可以上傳多個文件了，以前面事例為基礎(chǔ)，選擇多個文件上傳后，觀察一下控制臺的變化：
如果大家看到這里，有點激動，想手賤一下，可以 CodePen 玩玩，地址：
https://codepen.io/atapas/pen/MWeamYp
3.了解文件元數(shù)據(jù)
每當(dāng)我們上傳文件時，F(xiàn)ile對象都有元數(shù)據(jù)信息，例如file name，size，last update time，type 等等。這些信息對于進(jìn)一步的驗證和特殊處理很有用。
const fileUploader = document.getElementById('file-uploader');
// 聽更 change 件并讀取元數(shù)據(jù)
fileUploader.addEventListener('change', (event) => {
// 獲取文件列表數(shù)組
const files = event.target.files;
// 遍歷并獲取元數(shù)據(jù)
for (const file of files) {
const name = file.name;
const type = file.type ? file.type: 'NA';
const size = file.size;
const lastModified = file.lastModified;
console.log({ file, name, type, size, lastModified });
}
});
下面是單個文件上傳的輸出結(jié)果：
如果大家看到這里，有點激動，想手賤一下，可以 CodePen 玩玩，地址：
https://codepen.io/atapas/pen/gOMaRJv
4.了解 accept 屬性
我們可以使用accept屬性來限制要上載的文件的類型，如果只想上傳的文件格式是 .jpg，.png 時，可以這么做：
<input type="file" id="file-uploader" accept=".jpg, .png" multiple>
在上面的代碼中，只能選擇后綴是.jpg和.png的文件。
如果大家看到這里，有點激動，想手賤一下，可以 CodePen 玩玩，地址：
https://codepen.io/atapas/pen/OJXymRP
5. 管理文件內(nèi)容
成功上傳文件后顯示文件內(nèi)容，站在用戶的角度上，如果上傳之后，沒有一個預(yù)覽的，就很奇怪也不體貼。
我們可以使用FileReader對象將文件轉(zhuǎn)換為二進(jìn)制字符串。然后添加load 事件偵聽器，以在成功上傳文件時獲取二進(jìn)制字符串。
// FileReader 實例
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.驗證文件大小
7. 顯示文件上傳進(jìn)度
8. 怎么上傳目錄上傳?
9. 拖拽上傳
10. 使用objectURL處理文件
可以點擊閱讀原文，去原文章瀏覽全部技巧~
文章地址：
https://segmentfault.com/a/1190000039312701
3、前端優(yōu)秀實踐不完全指南
本文應(yīng)該叫，Web 用戶體驗設(shè)計提升指南。
一個 Web 頁面，一個 APP，想讓別人用的爽，也就是所謂的良好的用戶體驗，我覺得他可能包括但不限于：
-
急速的打開速度 -
眼前一亮的 UI 設(shè)計 -
酷炫的動畫效果 -
豐富的個性化設(shè)置 -
便捷的操作b -
貼心的細(xì)節(jié) -
關(guān)注殘障人士，良好的可訪問性 -
...
-
了解到一些小細(xì)節(jié)是如何影響用戶體驗的 -
了解到如何在盡量小的開發(fā)改動下，提升頁面的用戶體驗 -
了解到一些優(yōu)秀的交互設(shè)計細(xì)節(jié) -
了解基本的無障礙功能及頁面可訪問性的含義 -
了解基本的提升頁面可訪問性的方法
文章地址： https://segmentfault.com/a/1190000039268059
CKEditor
Trumbowyg
TinyMCE
Quill
Trix
Jodit Editor 3
Summernote
Editor.js
MediumEditor
Wysihtml
ContentTools
Froala
Redactor
文章地址： https://segmentfault.com/a/1190000039349270
const permission = {
create: false,
update: false,
read: true,
delete: false,
}
const permission = {
create: false,
update: false,
read: true,
delete: false,
}
// 從左往右，依次為 create, update, read, delete 所對應(yīng)的值
const permissionBinary = 0b0010
位掩碼
1、查詢用戶是否擁有某個權(quán)限
// 從左往右，依次為 create, update, read, delete 所對應(yīng)的值
const permissionBinary = 0b0010
// 由于 update 位于右數(shù)第三位，因此只需要讓掩碼向左移動2位即可
const mask = 0b1 << 2
const result = permissionBinary & mask
Boolean(result) // false
2、修改用戶的某個權(quán)限
// 從左往右，依次為 create, update, read, delete 所對應(yīng)的值
const permissionBinary = 0b0010
// 由于 update 位于右數(shù)第三位，因此只需要讓掩碼向左移動2位即可
const mask = 0b1 << 2
const result = permissionBinary ^ mask
parseInt(result).toString(2) // 0b0110
臟數(shù)據(jù)記錄
let A = 'a'
let B = 'b'
let C = 'c'
let D = 'd'
let O = 0b0000 // 十進(jìn)制 0
// 當(dāng)且僅當(dāng) A 發(fā)生了修改
O = 0b1000 // 十進(jìn)制 8
// 當(dāng)且僅當(dāng) B 發(fā)生了修改
O = 0b0100 // 十進(jìn)制 4
// 當(dāng)且僅當(dāng) C 發(fā)生了修改
O = 0b0010 // 十進(jìn)制 2
// 當(dāng)且僅當(dāng) D 發(fā)生了修改
O = 0b0001 // 十進(jìn)制 1
// 當(dāng) A 和 B 發(fā)生了修改
O = 0b1100 // 十進(jìn)制 12
// 當(dāng) A/B/C 都發(fā)生了修改
O = 0b1110 // 十進(jìn)制 14
if ( A 數(shù)據(jù)變了 ) {
更新A對應(yīng)的DOM節(jié)點
}
if ( B 數(shù)據(jù)變了 ) {
更新B對應(yīng)的DOM節(jié)點
}
/** 轉(zhuǎn)化成偽代碼 **/
if ( dirty & 8 ) { // 8 === 0b1000
更新A對應(yīng)的DOM節(jié)點
}
if ( dirty & 4 ) { // 4 === 0b0100
更新B對應(yīng)的DOM節(jié)點
}
老鼠喝毒藥
尾聲
文章地址： https://segmentfault.com/a/1190000039239875
評論
圖片
表情