Перетащите Json в Chrome

Question

Я ищу способ перетащить JSON-файл в Chrome и извлечь его информацию.

Answer 1

Вы можете использовать комбинацию HTML5 Drag & Drop и 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);
    }
);

Код не содержит никаких проверок работоспособности или обработки ошибок.