将Json拖放到Chrome中

Question

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

Answer 1

您可以使用HTML5拖放&删除并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); 
    } 
); 

的代码不包含任何完整性检查或错误处理。