將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); 
    } 
); 

的代碼不包含任何完整性檢查或錯誤處理。