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

該代碼不包含任何健全性檢查或錯誤處理。