使用HTML5和JavaScript在SQLite中插入和检索BLOB图像

时间:2016-07-25 07:30:37

标签: javascript html5 sqlite blob

我有这个简短的javascript代码,我可以将记录输入到sqlite数据库:

  function insertRecord() // Get value from Input and insert record . Function Call when Save/Submit Button Click..

  {

  var namamenutemp = $('input:text[id=namamenu]').val();

  var satuantemp = $('input:text[id=satuan]').val();

  var hargatemp = $('input:text[id=harga]').val();

  var stoktemp = '0';
  db.transaction(function (tx) { tx.executeSql(insertKasir, [namamenutemp, satuantemp, hargatemp], loadAndReset, onError); });  
  }
$("#submitButton").click(insertRecord);

我的html输入到sqlite:

<input type="hidden" id="id">
<input id="namamenu" type="text" placeholder="Nama menu" required="" autofocus="" pattern=" ">
<input id="satuan" type="text" placeholder="Contoh: PCS" required="" pattern=" ">
<input id="harga" type="text" placeholder="Rp." required="" pattern=" ">
<button id="submitButton" type="submit" >Save</button>

这是我的表结构:

"CREATE TABLE IF NOT EXISTS Kasir (id INTEGER PRIMARY KEY AUTOINCREMENT, namamenu TEXT, satuan TEXT, harga TEXT)"

现在我想在我的桌子上插入一些图片,我发现它会使用BLOB,但我不知道如何在我的HTML5-Javascript上使用它。

我是否也必须更改我的表结构?

1 个答案:

答案 0 :(得分:1)

这是一个类似的问题:如何将图像的内容作为base64。看起来该方法特定于firefox,但也可以在其他浏览器中使用:Get image data in JavaScript?

如果图片位于同一个域中,您可以使用ajax获取其内容。由于你已经在使用jQuery,它看起来像这样:

$.get(imageUrl, function(result) {
  console.log('binary image content', result);
});

如果您想要显示图片,则需要将其内容转换为base64,如下所述:Embedding Base64 Images