どのようにインデックス付きのデータベースで画像付きテキストボックスからデータをアップロードする

Question

私は過去2日間試しています。私はファイルのアップロードと2つのテキストボックスを持って、すべてが動作しており、データベースに格納されていますが、イメージはありません。テキストボックスのデータはインデックス付きのdbに格納されていますが、画像はインデックス付きのdbに格納されていません。image[]の空の配列として表示されています。これは私のjavascriptのadd関数です

function add() { 
    var a = document.getElementById("userfile"); 
    var b = a.files[0]; 

    var request = db.transaction(["todostore"], "readwrite") 
    .objectStore("todostore") 
    .add({ 
    timestamp: "KP" + (new Date()).getTime(), 
    todo: $("#todo").val(), 
    price:$("#toprice").val(), 
    image:b 
    }); 

    request.onsuccess = function(event) { 
    alert($("#todo").val() + " has been added to your database."); 
    $("#todo").val(""); 
    }; 
}; 

これはhtmlのコードです。私はエラーを特定できませんでした。

<label for="todo">To Do:</label> 
<input id="todo" type="text"> 
<input id="toprice" type="text"> 
<input type="file" id="userfile" /> 

<button onclick="add()">Add</button> 

Answer 1

Blobを直接IndexedDBに追加することは、私にとって謎です。

我々は次のようにFileReaderを使用してBASE64などの画像を追加することができます。

function add() { 
    var files = document.getElementById("userfile").files 
    if (!files || !files.length) return 

    var fileReader = new FileReader() 
    fileReader.onload = function() { 
    var request = db.transaction(["todostore"], "readwrite") 
     .objectStore("todostore") 
     .add({ 
     timestamp: "KP" + Date.now(), 
     todo: $("#todo").val(), 
     price: $("#toprice").val(), 
     image: reader.result // changing here 
     }) 
    request.onsuccess = function(event) { 
     alert($("#todo").val() + " has been added to your database.") 
     $("#todo").val("") 
    } 
    } 
    fileReader.readAsDataURL(file[0]) 
}