Yüklenen görüntüyü IndexedDB'ye kaydetme Javascript

Question

Görüntülere göz atmak için dosya yükleme denetleyicisini kullanıyorum ve seçilen görüntüler sayfada görüntü küçük resimleri olarak önizlenmelidir.

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

Birkaç görüntü seçtikten sonra, sonraki sayfaya gidin ve bir işlem yapın. Ve bu sayfadan geri dönerken, tüm görüntü önizlemeleri orada olmalı. Bir sonraki sayfaya gitmeden önce bu görüntüleri IndexedDB'ye kaydetmeyi düşündüm. Ancak bu durumda IndexedDB'nin nasıl kodlanacağından emin değilim.

Bana yardım eden var mı?

Answer 1

File nesneler, kendi başlarına veya diğer kayıtların bir parçası olarak, kayıt altına alınabilir ve Dizine Alınmış DB'ye kaydedilebilir.

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

olası bir gotcha: HTMLInputElement en filesdeğil bir Array kendisi ama bir olduğunu

Bu örnek sadece "images" adında bir nesne deposuna tek kayıt olarak dosyaların bir dizi (anahtar "key" olan) kaydeder dizi benzeri türü FileList olarak adlandırılır. Örneğiyle bir diziye dönüştürebilirsiniz. Array.from(e.files), ancak bir FileList klonlanabilir (ve bu nedenle IDB'de saklanır), bu yüzden "sadece çalışır" olmalıdır.