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

有趣的问题。如果不了解您的应用程序的所有细节，您的问题就没有正确的答案，但这里有一些信息。

问题： 是否可以在没有本地数据库的情况下执行此操作？

答：是的，这是可能的，但要了解后果。

首先，考虑你的目标。您希望用户可以访问应用程序中的图像/文件。有两种主要方法可以做到这一点。

  • 用户将图像/文件上传到您的服务器（或图像/文件的二进制表示）
  • 用户将其本地计算机上的图像/文件的路径上传到您的服务器。每当您的应用请求此图像时，它都会知道在其本地计算机上的何处找到它（假设路径没有改变）

正如您可以想象的那样，两者都会产生许多后果，但这对于这个问题来说有点偏离主题。

问题：即使我关闭了应用程序，如何保持上传？

答： 这将取决于您如何处理第一部分，但总体而言，这是一项容易得多的任务。这可以使用 jQuery、Angular 或其他许多前端框架轻松完成。您要做的是查询您的数据库以获取用户当前的图像/文件集合，然后为每个图像/文件在页面上以特定方式呈现它。实际代码将根据您选择的框架而有很大差异，但总体而言，如何做到这一点的想法是相同的。

其他注意事项：如果您选择将所有图像/文件数据存储在您的服务器上，这可能会在未来变成一个扩展问题。这样做而不是使用为 nwjs 构建的众多本地存储选项之一（存储选项）有什么好处？

此外，不确定您正在运行什么操作系统，但一定要查看您的 nwjs 项目文件夹。如果您有 Mac，它很可能位于以下路径：

  • Users/YourName/Library/Application Support/Your_Project_Name（匹配 package.json 名称）

许多人不知道 nwjs 已经包含的内置功能，这始终是开始搜索的好地方。

于 2016-04-06T04:12:28.787 回答
0

一个简单的方法是将用户更改的元数据（哪些图像，什么顺序等）存储在本地存储中。在启动时，您只需遍历元数据并重新创建 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 回答