Question

我正在寻找一种方法将json文件拖放到chrome中并提取它的信息。

Answer 1

您可以结合使用HTML5 Drag＆amp;删除和FileReader API以读取文件：

var dnd = new DnDFileController('body', function(files) {  
  var f = files[0];

  if (!f.type.match('application/json')) {
    alert('Not a JSON file!');
  }

  var reader = new FileReader();
    reader.onloadend = function(e) {
    var result = JSON.parse(this.result);
    console.log(result);
  };
  reader.readAsText(f);
});

DnDFileController来自http://html5-demos.appspot.com/static/filesystem/filer.js/demos/js/dnd.js，只是在您作为选择器传入的元素上设置正确的DnD事件侦听器。

请参阅http://jsbin.com/oqosav/2/edit

Answer 2

这是自包含的最小工作代码，没有外部依赖关系：

function dropJSON(targetEl, callback) {
    // disable default drag & drop functionality
    targetEl.addEventListener('dragenter', function(e){ e.preventDefault(); });
    targetEl.addEventListener('dragover',  function(e){ e.preventDefault(); });

    targetEl.addEventListener('drop', function(event) {

        var reader = new FileReader();
        reader.onloadend = function() {
            var data = JSON.parse(this.result);
            callback(data);
        };

        reader.readAsText(event.dataTransfer.files[0]);    
        event.preventDefault();
    });
}

dropJSON(
    document.getElementById("dropTarget"),
    function(data) {
        // dropped - do something with data
        console.log(data);
    }
);

代码不包含任何健全性检查或错误处理。

拖拽将Json放入Chrome

2 个答案: