JS 前端 H5 實現txt檔案上傳並讀取其中內容

2022-04-03 15:28:34 字數 539 閱讀 7442

環境:react  16.8.6

瀏覽器:chrome

業務背景:使用檔案批量匯入資料,如:批量匯入imei號,在前端顯示

第一步:首先你得通過input標籤來匯入檔案,這是瀏覽器唯一給的本地 io 口,然後你會得到如下樣子的blob檔案

檔案如下

第二步把上述檔案用 filereader 讀取,讀取是非同步的

const reader = new

filereader()

let strarr =

try`.split(',')

} catch

(e)

if (strarr.length > 0)

})dispatch(,

});}

H5 上傳檔案

input 標籤 type file 時 定義支援上傳的檔案型別 設定accept 支援的型別參考這裡 效果 點選選擇檔案,彈出選擇檔案的彈框,被允許的型別可以選擇,未被accept的型別是灰色,不可選。坑 input 為file cursor pointer 無效 上傳檔案樣式太醜。整容樣式如下。...

H5上傳功能

遇到的問題 關於ajaxfileupload上傳,success和error都觸發的情況,具體描述摘選自安慕希 移動端上傳太大3m左右失敗率比較高,上傳前沒有做壓縮導致失敗率比較高 開發者暫時對這個工具不維護了,使用過的大佬發布的文章 開發者暫時對這個工具不維護了,使用可以參考diyupload一起...

H5前端基礎 布局

浮動 使用float來設定元素浮動 可選值 none 預設值,不浮動,元素在文件流中 left 元素向左浮動 right 元素向右浮動 特點 1.元素浮動以後會完全脫離文件流 2.浮動以後元素會一直向父元素的最上方移動 3.直到遇到父元素的邊框或者其他的浮動元素,會停止移動 4.如果浮動元素的上邊是...