HTML5：离线上传图片

最新推荐文章于 2023-03-31 20:39:12 发布

danpu0978

最新推荐文章于 2023-03-31 20:39:12 发布

阅读量662

点赞数

文章标签： java python linux vue 大数据 ViewUI

我目前正在处理需要脱机工作的应用程序。这具有有益的副作用，我们使用了不同HTML5存储功能。其中之一是File API ，我们使用它来将图像存储在本地-在排队将其上传到后端服务器之前。

在本文中，我将分享一些代码。该示例在Google Chrome浏览器中有效–对于DOM操作，我将使用JQuery。

从简单开始，我们为图像输入一个文件，并显示一个区域以显示上载的图像。

<body>
 <input type="file" accept="image/*" class="js-image-upload"/>
 <div class="js-image-container"></div>
</body>

当用户选择文件时，我们要存储图像。

$(document).on('change', '.js-image-upload', function (event) {
  var file = event.target.files[0];
  var fileName = createTempName(file);

  writeImage(fileName, file);
});

图像存储通过此方法处理。

function writeImage(fileName, file) {
  getFileSystem(function (fileSystem) {
    fileSystem.root.getFile(fileName, {create: true}, function (fileEntry) {
      fileEntry.createWriter(function (fileWriter) {
        fileWriter.onwriteend = writeSuccessFull;
        fileWriter.onerror = errorFct;
        fileWriter.write(file);
      }, errorFct);
    });
  });
}

这是怎么回事

检索文件系统
在根目录上通过指定名称创建文件
为此文件创建作者
异步文件写入发生时配置成功和错误回调
使用writer写入文件的Blob

文件系统的检索是一个两步过程。我们需要从浏览器请求配额，然后获得文件系统。

var SIZE = 100 * 1024 * 1024; // 100 MB
var getFileSystem = function (successFct) {
  navigator.webkitPersistentStorage.requestQuota(SIZE, function () {
    window.webkitRequestFileSystem(window.PERSISTENT, SIZE, successFct, errorFct);
  }, errorFct);
};

将要求用户向网站授予对持久性存储的访问权限。您可能会遇到一些错误，例如，当用户不接受我们的请求时。

但是，假设用户信任我们。然后我们要对成功写入做出反应并显示图像。我们可以使用本地文件存储URL，并将文件添加到队列中，以将文件上传到服务器。

var showImage = function (fileName) {
  var src = 'filesystem:' + window.location.origin + '/persistent/' + fileName;
  var img = $('<img />').attr('src', src);
  $('.js-image-container').append(img);
};

var writeSuccessFull = function () {
  addToSyncQueue(fileName);
  showImage(fileName);
};

我在这里省略了队列逻辑。您可以在应用程序的Web存储或IndexedDB中保留要上传的图像队列。要从存储读取图像，您可以使用类似以下的内容

var readImage = function (fileName, successFct) {
  getFileSystem(function (fileSystem) {
    fileSystem.root.getFile(fileName, {}, function (fileEntry) {

        fileEntry.file(successFct, errorFct);

      }, errorFct);
    }
  );
};

因此，这是我们在这里所做的简要概述。可以在这里找到工作示例代码：https://gist.github.com/jthoenes/3668856a188d600e02d6

希望它对处理类似问题的一些人有用。当您脑海中突然浮现时，随时提出问题。

翻译自: https://www.javacodegeeks.com/2014/04/html5-offline-upload-of-images.html

danpu0978

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5：离线上传图片

我目前正在处理需要脱机工作的应用程序。这具有有益的副作用，我们使用了不同HTML5存储功能。其中之一是File API ，我们使用它来将图像存储在本地-在排队将其上传到后端服务器之前。在本文中，我将分享一些代码。该示例在Google Chrome浏览器中有效–对于DOM操作，我将使用JQuery。从简单开始，我们为图像输入一个文件，并显示一个区域以显示上载的图像。 &lt...
复制链接

扫一扫