如何將上傳的圖像保存到IndexedDB Javascript

我正在使用文件上傳控制器瀏覽圖像，並且應該在頁面中以圖像縮略圖的形式預覽所選圖像。如何將上傳的圖像保存到IndexedDB Javascript

<input type="file" id="imageSelector" multiple="multiple" /> 

var uploadImageCtrl = document.querySelector('#imageSelector'); 
uploadImageCtrl.addEventListener('change', function() { 
    var files = this.files; 
    for(var i=0; i<files.length; i++){ 
     preview(this.files[i]); 
    } 
}, false);

選擇幾張圖片後，進入下一頁並執行一些操作。當從該頁面返回時，所有圖像預覽應該在那裏。我想在下一頁之前將這些圖像保存到IndexedDB中。但是我不確定在這種情況下如何爲IndexedDB編寫代碼。

任何人都可以幫助我嗎？

來源

2016-04-01 Nidhish

File對象是可複製的，並且可以保存到索引數據庫中，既可以自己記錄，也可以保存爲其他記錄的一部分。

這個例子只是保存文件的數組作爲一個記錄（關鍵是"key"）命名"images"對象存儲：

// Call with array of images; callback will be called when done. 
function save(array_of_files, callback) { 
    openDB(function(db) { 
    var tx = db.transaction('images', 'readwrite'); 
    tx.objectStore('images').put(array_of_files, 'key'); 
    tx.oncomplete = function() { callback(); }; 
    tx.onabort = function() { console.log(tx.error); }; 
    }); 
} 

// Callback will be called with array of images, or undefined 
// if not previously saved. 
function load(callback) { 
    openDB(function(db) { 
    var tx = db.transaction('images', 'readonly'); 
    var req = tx.objectStore('images').get('key'); 
    req.onsuccess = function() { 
     callback(req.result); 
    }; 
    }); 
} 

function openDB(callback) { 
    var open = indexedDB.open('my_db'); 
    open.onupgradeneeded = function() { 
    var db = open.result; 
    db.createObjectStore('images'); 
    }; 
    open.onsuccess = function() { 
    var db = open.result; 
    callback(db); 
    }; 
    open.onerror = function() { console.log(open.error); }; 
}

一個可能的疑難雜症：HTMLInputElement的files是不的Array本身，而是一個類似於數組的類型，稱爲FileList。您可以將它轉換爲一個數組，例如Array.from(e.files)，但FileList可以克隆（因此存儲在IDB），所以這應該「只是工作」。

來源

2016-04-20 17:48:29

如何將上傳的圖像保存到IndexedDB Javascript

回答

相關問題