Drag & Drop Json в Chrome

Question

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

Answer 1

Вы можете использовать комбинацию HTML5 Drag & падения и 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 и просто настраивает правильные обработчики событий ДНА на элементе вы передаете в качестве селектор.

См 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); 
    } 
); 

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