1

私は、アップロードされたコンテンツごとに < div > を自動的に生成してラップしながら、ユーザーが画像やビデオをアップロードできるようにする単純なアプリに取り組んでいます。アップロードされた各画像は、特別に様式化された前の画像の隣にとどまります。

私が望むのは、作成するたびに (画像またはビデオ) アップロードした後、アプリを閉じてもそこにとどまることです。そして、将来それを取り除けば、当然、それは消えてしまいます。

ローカルデータベースなしでそれを行うことは可能ですか?そうでない場合、データベースでそれを行う最良の方法と使用するモジュールは何ですか?

//image upload

function uploadImage(file) {

  var reader = new FileReader();
  var div_img = $('<div class="content"></div>');
  reader.onload = function(event) {

    img_url = event.target.result;


    div_img.html(('<img src="' + img_url + '" onmousedown="return false" />'));
    div_img.appendTo('#wrapper');

  }

  reader.readAsDataURL(file);

}

$("#the-image-file-field").change(function() {

  uploadImage(this.files[0])
});


//video upload

function renderVideo(file) {
  var reader = new FileReader();
  var div_vid = $('<div class="content_video"></div>');
  reader.onload = function(event) {


    vid_url = event.target.result;


    div_vid.html(('<video controls><source src="' + vid_url + '" type="video/mp4" /> '));

    div_vid.appendTo('#vid_container');
  }


  reader.readAsDataURL(file);
}

$("#the-video-file-field").change(function() {

  renderVideo(this.files[0])
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type='file' id="the-image-file-field" accept="image/*" />
<input type="file" id="the-video-file-field" accept="video/*" />

<div id="wrapper" class="wrapper">
  <div id="vid_container"></div>

</div>


<script src="javascripts/uploader.js"></script>

4

2 に答える 2

0

これを行う簡単な方法は、ユーザーの変更 (どの画像、どの順序など) のメタデータを localstorage に保存することです。起動時に、メタデータを繰り返し処理し、以前のように見えるように html を再作成します。

nw.js を使用しているため、マニフェストでサイズを設定できるため、localstorage の制限について心配する必要はありません。

https://github.com/nwjs/nw.js/wiki/manifest-format

(dom_storage_quota を探します)

内部的には、nw.js はローカル ストレージに sqldatabse を使用するため、これは安価なデータ ストレージを取得する簡単な方法です。

于 2016-04-06T04:37:00.367 に答える