{"id":7463,"date":"2018-03-27T23:02:00","date_gmt":"2018-03-27T15:02:00","guid":{"rendered":"http:\/\/www.zhangxinxu.com\/wordpress\/?p=7463"},"modified":"2018-04-10T16:38:09","modified_gmt":"2018-04-10T08:38:09","slug":"js-parse-text-file","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2018\/03\/js-parse-text-file\/","title":{"rendered":"\u5c0ftips: \u7eaf\u524d\u7aefJS\u8bfb\u53d6\u4e0e\u89e3\u6790\u672c\u5730\u6587\u672c\u7c7b\u6587\u4ef6"},"content":{"rendered":"

by zhangxinxu<\/a> from http:\/\/www.zhangxinxu.com\/wordpress\/?p=7463<\/a>
\n\u672c\u6587\u53ef\u5168\u6587\u8f6c\u8f7d\uff0c\u4f46\u9700\u5f97\u5230\u539f\u4f5c\u8005\u4e66\u9762\u8bb8\u53ef\uff0c\u540c\u65f6\u4fdd\u7559\u539f\u4f5c\u8005\u548c\u51fa\u5904\uff0c\u6458\u8981\u5f15\u6d41\u5219\u968f\u610f\u3002<\/p>\n

\u4e00\u3001\u4f55\u4e3a\u6587\u672c\u7c7b\u6587\u4ef6\uff1f<\/h3>\n

\u6240\u8c13\u6587\u672c\u7c7b\u6587\u4ef6\uff0c\u6307MIME Type\u4e3atext\/*<\/code>\u6587\u4ef6\uff0c\u4f8b\u5982\uff0cCSS\u6587\u4ef6\uff08text\/stylesheet<\/code>\uff09\uff0cJS\u6587\u4ef6\uff08text\/javascript<\/code>\uff09\uff0cHTML\u6587\u4ef6\uff08text\/html<\/code>\uff09\uff0ctxt\u6587\u672c\uff08text\/plain<\/code>\uff09\u7b49\u7b49\u3002<\/p>\n

\u5728\u73b0\u4ee3\u6d4f\u89c8\u5668\u4e0b\uff0c\u6211\u4eec\u53ef\u4ee5\u76f4\u63a5\u5bf9\u8fd9\u4e9b\u6587\u4ef6\u8fdb\u884c\u5904\u7406\uff0c\u65e0\u8bba\u662f\u901a\u8fc7type=file<\/code>\u8868\u5355\u5143\u7d20\u8fd8\u662f\u4ece\u684c\u9762\u62d6\u62fd\u5230\u7f51\u9875\u4e2d\u90fd\u662f\u53ef\u4ee5\u7684\u3002<\/p>\n

\u4e8c\u3001\u7eaf\u524d\u7aefJS\u8bfb\u53d6\u4e0e\u89e3\u6790\u672c\u5730\u6587\u672c\u7c7b\u6587\u4ef6<\/h3>\n

\u5df2\u77e5file\u5c31\u662f\u6587\u4ef6\u5bf9\u8c61\uff0c\u5219\u6838\u5fc3CSS\u5982\u4e0b\uff1a<\/p>\n

var reader = new FileReader();\nreader.onload = function (event) {\n    \/\/ event.target.result\u5c31\u662f\u6587\u4ef6\u6587\u672c\u5185\u5bb9\n    \/\/ \u7136\u540e\u4f60\u5c31\u53ef\u4ee5\u4e3a\u6240\u6b32\u4e3a\u4e86\n    \/\/ \u4f8b\u5982\u5982\u679c\u662fJSON\u6570\u636e\u53ef\u4ee5\u89e3\u6790\n    \/\/ \u5982\u679c\u662fHTML\u6570\u636e\uff0c\u53ef\u4ee5\u76f4\u63a5\u63d2\u5165\u5230\u9875\u9762\u4e2d\n    \/\/ \u751a\u81f3\u5b57\u5e55\u6587\u4ef6\uff0c\u5404\u79cd\u6ee4\u955c\uff0c\u81ea\u5b9a\u4e49\u6587\u4ef6\u683c\u5f0f\uff0c\u90fd\u53ef\u4ee5\u73a9\u5f04\u4e8e\u9f13\u638c\u4e4b\u95f4\u2026\u2026<\/span>\n};\nreader.readAsText<\/span>(file);<\/pre>\n
\u6838\u5fc3\u5c31\u662freadAsText()<\/code>\u8fd9\u4e2a\u65b9\u6cd5\uff0c\u6211\u4eec\u53ef\u80fd\u6709\u7528\u8fc7\u7684\u524d\u7aef\u9884\u89c8\u672c\u5730\u56fe\u7247\uff0c\u5219\u7528\u7684\u662fFileReader.readAsDataURL()<\/code>\u65b9\u6cd5\uff0c\u4e00\u4e2a\u8f6c\u6587\u672c\uff0c\u4e00\u4e2a\u8f6cbase64\uff0c\u6027\u8d28\u90fd\u662f\u4e00\u6837\u7684\u3002<\/p>\n
\u76ee\u524dfile<\/code>\u5bf9\u8c61\u901a\u5e38\u6709\u4e0b\u9762\u51e0\u79cd\u65b9\u5f0f\u83b7\u53d6\uff1a<\/p>\n
    \n
  1. type=file<\/code>\u8868\u5355\u5143\u7d20\uff0c\u5047\u8bbeDOM\u5143\u7d20\u662feleFile<\/code>\uff0c\u5219file<\/code>\u5bf9\u8c61\uff08\u5047\u8bbe\u975e\u591a\u9009\u6a21\u5f0f\uff09\u4e3aeleFile.files[0]<\/code>\u3002\u6216\u8005\u4e5f\u53ef\u4ee5\u5728change<\/code>\u4e8b\u4ef6\u4e2d\u83b7\u53d6\uff0c\u4f8b\u5982\uff1a\n
    eleFile.onchange = function (event) {\n    var file = event.target.files[0];\n};<\/pre>\n<\/li>\n
  2. \u62d6\u62fd\u4e8b\u4ef6\u83b7\u53d6\u3002\u4f8b\u5982\uff1a\n
    this.dragDrop.addEventListener(\"drop\", function(event) { \n    var file = event.dataTransfer.files[0];\n}, false);<\/pre>\n<\/li>\n<\/ol>\n
    \u4e09\u3001\u5b9e\u8df5-\u5b9e\u73b0\u4e00\u4e2a\u7eaf\u524d\u7aef\u7684\u7b80\u6613CSS\u538b\u7f29\u5de5\u5177<\/h3>\n
    \u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1aCSS\u5728\u7ebf\u538b\u7f29\u5de5\u5177demo<\/a><\/p>\n
    \u6b64\u5de5\u5177\u5dee\u4e0d\u591a10\u5e74\u4e86\uff0c\u7136\u540e\u8d81\u6b64\u673a\u4f1a\u52a0\u4e2a\u76f4\u63a5\u4e0a\u4f20CSS\u538b\u7f29\u529f\u80fd\u3002\u64cd\u4f5c\u6f14\u793a\u5982\u4e0b\uff1a<\/p>\n
    1. \u9009\u62e9CSS\u6587\u4ef6\uff0c\u6b64\u65f6\u4f1a\u81ea\u52a8\u89e6\u53d1\u201c\u5f00\u59cb\u5904\u7406\u201d\u6309\u94ae\uff1b<\/p>\n
    \"\u9009\u62e9CSS\u6587\u4ef6\" \"\u9009\u62e9CSS\u6587\u4ef6\"<\/p>\n
    2. \u4e0b\u8f7dCSS\u6587\u4ef6\uff1a<\/p>\n
    \"\u4e0b\u8f7dCSS\u6587\u4ef6\"<\/p>\n
    \"\u4e0b\u8f7d\u540e\u7684CSS\u6587\u4ef6\"<\/p>\n
    \u8fd9\u91cc\u7684\u4e0b\u8f7d\u529f\u80fd\u4e5f\u662f\u7eaf\u524d\u7aef\u5b9e\u73b0\u7684\uff0c\u6709\u5174\u8da3\u53ef\u4ee5\u53c2\u89c1\u4e4b\u524d\u7684\u6587\u7ae0\uff1a\u201cJS\u524d\u7aef\u521b\u5efahtml\u6216json\u6587\u4ef6\u5e76\u6d4f\u89c8\u5668\u5bfc\u51fa\u4e0b\u8f7d<\/a>\u201d\u3002<\/p>\n
    \u76f8\u5173\u4ee3\u7801\u76f4\u63a5\u53f3\u952e->\u67e5\u770b\u9875\u9762\u6e90\u4ee3\u7801\u5373\u53ef\uff01<\/p>\n
    \u56db\u3001\u7ed3\u675f\u8bed<\/h3>\n
    FileReader<\/code>\u5bf9\u8c61\u9664\u4e86\u6709readAsText()<\/code>\u548creadAsDataURL()<\/code>\u5916\uff0c\u8fd8\u6709\u4e0b\u97622\u4e2a\u6807\u51c6\u65b9\u6cd5\uff0c\u5206\u522b\u662f\uff1aFileReader.abort()<\/code>\u548cFileReader.readAsArrayBuffer()<\/code>.<\/p>\n
    FileReader.abort()<\/code>\u53ef\u4ee5\u7ec8\u6b62\u8bfb\u64cd\u4f5c\u3002<\/p>\n
    FileReader.readAsArrayBuffer()<\/code>\u4f5c\u7528\u662f\u628aBlob\u6216\u8005file\u5bf9\u8c61\u4ee5ArrayBuffer<\/code>\u5f62\u5f0f\u8bfb\u51fa\u6765\u3002\u56e0\u6b64\uff0c\u53ef\u4ee5\u7f57\u5217\u4e0b\uff1a<\/p>\n