Javascript/Jquery JSON 文件上传答案

【问题标题】：Javascript/Jquery JSON File UploadJavascript/Jquery JSON 文件上传
【发布时间】：2019-03-14 06:12:31
【问题描述】：

我必须创建一个带有一个 li 名称 import 的 html 列表。在后面我创建了input type ="file"，它将被 hidden 。

如果用户点击import，它应该使用.click()[![在此处输入图片描述][1]][1]从后面触发文件上传。

一旦使用选择.json文件，它可以是任何名称..

然后点击文件上传的打开按钮，它应该保存json 并通过事件调度程序传递json 对象。我创建了事件调度程序但无法获取json

问题：我无法使用.onChange 和.onChange 保存 json 对象一次工作，然后我必须刷新然后才能再次工作。

要求：点击导入按钮，隐藏文件import会触发，然后选择任意名称的json文件（json文件可以是任意名称）函数会触发保存 json 对象和 json 对象将使用 iframe 使用 event dispatcher 发送。问题:: 无法保存 json 或获取 json 。我试过getjson，但如果是单个文件名。

   <!DOCTYPE html>
<html>
<meta charset="UTF-8"/>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('button').click(function (){

     $('#import').click();




    });


$('#import').on('change',function () {

  // not able to get json in a json object on selection of json file 
 var getJson = $('#import')[0].files;


// dispatcher just take json object and it will send to iframe . 

  // WindowDispatcher("Send Json", getJson);

 });

 });
</script>
</head>

<body>
<input type='file' id='import' style = "display:none" accept='.json ' aria-hidden="true" >
<ul>
<li>
<button id="importLink" >import</button>
</li>
</ul>




</body>
</html>

【问题讨论】：

请不要发布您的代码图片，最好发布实际代码本身。
您似乎想读取使用文件输入选择的文件的 JSON。因此，您不需要 AJAX，而是需要 FileReader：stackoverflow.com/q/23344776/519413
一旦更改工作，我必须重新加载页面以使其再次工作..

标签： javascript jquery html json web

【解决方案1】：

据我所知，您缺少导入 onChange 侦听器的参数列表。

在第一张图片中，您正在调用 $'#import').click() -- 您缺少前导 (

在运行您提到的代码时，您应该会收到一个 javascript 错误，因为当文件输入发生更改时，您至少没有包含一个空参数列表，尽管我可能是错的。

【讨论】：

是的，我修复了它.. 也分享代码.. 现在如何获取 json 我不确定
ReferenceError: WindowDispatcher 未定义

【解决方案2】：

$(document).ready(function(){
   $("#importLink").click(function(){
      $("#import").click();   
   });
   function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}
    $("#import").on('change',function(e){
      var file =  e. target. files[0];
      var path = (window.URL || window.webkitURL).createObjectURL(file);
readTextFile(path, function(text){
    var data = JSON.parse(text);
    console.log(data);
    //Your ajax call here.
      });
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="file" id="import" style="display:none" accept='.json' aria-hidden="true" >
<ul>
 <li id="importLink">import</li>
 </ul>
 <output id="list"></output>
 <div id="name">list</div>
  <div id="age">list</div>

从e. target. files[0];读取文件

【讨论】：

{ "first_name" : "hello", "last_name" : "work", "online" : true }