zoukankan      html  css  js  c++  java
  • js拖拽json文件实现获取json文件内容

    效果展示:

    代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
        #content {
           500px;
          height: 500px;
          border: 1px solid rebeccapurple;
        }
      </style>
    </head>
    
    <body>
      <div id="content">
        <h2>文件拖入此处解析</h2>
      </div>
    </body>
    <script>
      let content = document.getElementById("content");
    
      function scanFiles(item) {
        console.log(item)
      }
    
      function handleDragOver(e) {
        e.stopPropagation();
        e.preventDefault();
        console.log("xxxxx")
        // console.log(e)
      }
    
      function handleFileSelect(e) {
        // e.stopPropagation();
        e.preventDefault();
        let item = e.dataTransfer;
        scanFiles(e);
    
        var files = [];
        [].forEach.call(e.dataTransfer.files, function (file) {
          files.push(file);
        }, false);
    
        for (var f of files) {
          var reader = new FileReader();
          reader.readAsText(f);
          //读取文件的内容
          reader.onload = function () {
              console.log("结果")
              console.log(this.result)
          };
    
        }
    
    
      }
    
      content.addEventListener("dragover", handleDragOver, false);
      content.addEventListener("drop", handleFileSelect, false);
    </script>
    
    </html>
    
  • 相关阅读:
    P3133 [USACO16JAN]无线电联系Radio Contact
    P2196 挖地雷
    P2434 [SDOI2005]区间
    P2820 局域网
    P2904 [USACO08MAR]跨河River Crossing
    P1586 四方定理
    P2983 [USACO10FEB]购买巧克力Chocolate Buying
    P2049 魔术棋子
    kali-linux破解密码运行脚本并隐藏进程
    kali安装使用
  • 原文地址:https://www.cnblogs.com/justyouadmin/p/11711844.html
Copyright © 2011-2022 走看看