Javascript / Jquery JSON文件上传

Question

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

如果用户单击导入，则应使用.click() [！[在此处输入图片描述] [1]] [1]触发文件上传。

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

然后，在单击文件上传的打开按钮时 ，应保存json并将json对象传递给事件分配器。 我有创建事件调度程序，但无法获取json

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

要求：单击导入按钮时 ，将触发隐藏文件导入，然后在选择任何名称的json文件（json filem可以是任何名称）时将保存json对象，并且将使用iEvent使用事件分派器发送json对象。 问题：无法保存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>

Answer 1

在我所看到的之外，您缺少导入onChange侦听器的参数列表。

在第一个图像中，您正在调用$'#import').click() －您缺少前导(

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

Answer 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];读取文件e. target. files[0]; e. target. files[0];

Javascript / Jquery JSON文件上传

问题描述

2 个解决方案

解决方案1
0 2018-10-09 12:59:15

解决方案2
0 2018-10-09 13:05:30

Javascript / Jquery JSON文件上传

问题描述

2 个解决方案

解决方案1 0 2018-10-09 12:59:15

解决方案2 0 2018-10-09 13:05:30

解决方案1
0 2018-10-09 12:59:15

解决方案2
0 2018-10-09 13:05:30