{"id":78,"date":"2021-10-24T17:22:03","date_gmt":"2021-10-24T09:22:03","guid":{"rendered":"https:\/\/www.zhangshuwei.com\/?p=78"},"modified":"2021-10-24T17:22:03","modified_gmt":"2021-10-24T09:22:03","slug":"javascript%e6%8b%96%e6%8b%bd%e4%b8%8a%e4%bc%a0%e6%96%87%e4%bb%b6","status":"publish","type":"post","link":"https:\/\/www.zhangshuwei.com\/index.php\/2021\/10\/24\/javascript%e6%8b%96%e6%8b%bd%e4%b8%8a%e4%bc%a0%e6%96%87%e4%bb%b6\/","title":{"rendered":"JavaScript\u62d6\u62fd\u4e0a\u4f20\u6587\u4ef6"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup line-numbers\">&lt;!DOCTYPE html>\r\n&lt;html>\r\n&lt;head>\r\n\t&lt;meta charset=\"utf-8\">\r\n\t&lt;title>drag file&lt;\/title>\r\n\t&lt;style type=\"text\/css\">\r\n\t\t* {\r\n\t\t\tmargin: 0;\r\n\t\t\tpadding: 0;\r\n\t\t}\r\n\t\t.container {\r\n\t\t\twidth: 60%;\r\n\t\t\tmax-width: 600px;\r\n\t\t\theight: 320px;\r\n\t\t\tpadding: 15px;\r\n\t\t\tmargin: 20px auto 0;\r\n\t\t\tborder-radius: 10px;\r\n\t\t\tbackground-color: #fce4ec;\r\n\t\t}\r\n\t\t.dashboard {\r\n\t\t\twidth: 100%;\r\n\t\t\theight: 100%;\r\n\t\t\tbox-sizing: border-box;\r\n\t\t\tpadding: 12px;\r\n\t\t\tborder: 3px dashed #F8BBD0;\r\n\t\t\tborder-radius: 5px;\r\n\t\t\tfont-size: 20px;\r\n\t\t\tcolor: #2c1612;\r\n\t\t\tcursor: text;\r\n\t\t\twhite-space: pre-wrap; \r\n\t\t\t\/*word-break: break-all;*\/\r\n\t\t\tword-wrap: break-word;\r\n\t\t\toverflow-y: auto;\r\n\t\t}\r\n\t&lt;\/style>\r\n&lt;\/head>\r\n&lt;body>\r\n\t&lt;div class=\"container\">\r\n\t\t&lt;div id=\"dashboard\" class=\"dashboard\">&lt;\/div>\r\n\t&lt;\/div>\r\n\t&lt;script type=\"text\/javascript\">\r\n\t\tvar dashboard = document.getElementById(\"dashboard\")\r\n\t\tdashboard.addEventListener(\"dragover\", function (e) {\r\n\t\t\te.preventDefault()\r\n\t\t\te.stopPropagation()\r\n\t\t})\r\n\t\tdashboard.addEventListener(\"dragenter\", function (e) {\r\n\t\t\te.preventDefault()\r\n\t\t\te.stopPropagation()\r\n\t\t})\r\n\t\tdashboard.addEventListener(\"drop\", function (e) {\r\n\t\t\t\/\/ \u5fc5\u987b\u8981\u7981\u7528\u6d4f\u89c8\u5668\u9ed8\u8ba4\u4e8b\u4ef6\r\n\t\t\te.preventDefault()\r\n\t\t\te.stopPropagation()\r\n\t\t\tvar files = this.files || e.dataTransfer.files\r\n\t\t\tvar reader = new FileReader()\r\n\t\t\treader.readAsText(files[0], 'utf-8')\r\n\t\t\treader.onload = function (evt) {\r\n\t\t\t\tvar text = evt.target.result\r\n\t\t\t\tdashboard.innerText = text\r\n\t\t\t}\r\n\t\t})\r\n\t&lt;\/script>\r\n&lt;\/body>\r\n&lt;\/html><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>\u9700\u5bf9\u76ee\u6807\u533a\u57df\u6dfb\u52a0 drop \u4e8b\u4ef6\u76d1\u542c\uff0c\u5728\u56de\u8c03 \u4e2d\u901a\u8fc7 \u53c2\u6570 e.dataTransfer.files \u83b7\u53d6\u88ab\u62d6\u62fd\u4e0a\u4f20\u7684\u6587\u4ef6\u6570\u7ec4\u3002<\/li><li>\u9700\u8981\u5728 dragover \u548c dragenter \u4e8b\u4ef6\u76d1\u542c\u4e2d\u963b\u6b62\u6d4f\u89c8\u5668\u9ed8\u8ba4\u884c\u4e3a\u3002<\/li><li>\u4ee3\u7801\u662f\u7528 utf-8 \u65b9\u5f0f\u89e3\u6790\u6587\u4ef6\u5185\u5bb9\u7684\uff0c\u5982\u679c \u6587\u4ef6\u6216\u7f51\u9875 \u7f16\u7801\u4e0d\u662f utf-8 \u7684\u8bdd\uff0c\u5c06\u4f1a\u51fa\u73b0\u4e71\u7801\u3002<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u9700\u5bf9\u76ee\u6807\u533a\u57df\u6dfb\u52a0 drop \u4e8b\u4ef6\u76d1\u542c\uff0c\u5728\u56de\u8c03 \u4e2d\u901a\u8fc7 \u53c2\u6570 e.dataTransfer.files \u83b7\u53d6\u88ab\u62d6 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[23],"class_list":["post-78","post","type-post","status-publish","format-standard","hentry","category-front-end","tag-23"],"_links":{"self":[{"href":"https:\/\/www.zhangshuwei.com\/index.php\/wp-json\/wp\/v2\/posts\/78","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.zhangshuwei.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhangshuwei.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhangshuwei.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhangshuwei.com\/index.php\/wp-json\/wp\/v2\/comments?post=78"}],"version-history":[{"count":1,"href":"https:\/\/www.zhangshuwei.com\/index.php\/wp-json\/wp\/v2\/posts\/78\/revisions"}],"predecessor-version":[{"id":79,"href":"https:\/\/www.zhangshuwei.com\/index.php\/wp-json\/wp\/v2\/posts\/78\/revisions\/79"}],"wp:attachment":[{"href":"https:\/\/www.zhangshuwei.com\/index.php\/wp-json\/wp\/v2\/media?parent=78"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhangshuwei.com\/index.php\/wp-json\/wp\/v2\/categories?post=78"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhangshuwei.com\/index.php\/wp-json\/wp\/v2\/tags?post=78"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}