如何将上传的图像保存到IndexedDB Javascript

时间:2016-04-01 09:56:56

标签: javascript image save indexeddb

使用文件上传控制器浏览图片,所选图片应作为图片缩略图在页面中预览。

<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编写代码。

任何人都可以帮助我吗?

1 个答案:

答案 0 :(得分:3)

SELECT * FROM (SELECT BRANCH.NAME, SALES.TOTAL, TIME.MONTH FROM SALES INNER JOIN BRANCH ON SALES.BRANCH_ID = BRANCH.BRANCH_ID INNER JOIN TIME ON SALES.TIME_ID = TIME.TIME_ID ) AS TABLE1 PIVOT ( SUM(SALES.TOTAL) FOR TIME.MONTH IN ([APR],[MAY],[JUN]) ) PIVOTTABLE 个对象是可复制的,可以保存到索引数据库,作为记录本身或作为其他记录的一部分。

此示例仅将一个文件数组作为单个记录(键为File)保存到名为"key"的对象库中:

"images"

一个可能的问题:HTMLInputElement的// 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); }; } files本身,而是类似于数组的类型Array。您可以将其转换为数组,例如FileList,但可以克隆Array.from(e.files)(因此存储在IDB中),因此这应该“正常工作”。