标签: fileapi

我createObjectURL用来获取本地图像文件的引用URL.当我完成文件/图像时,我打电话revokeObjectURL来释放内存.一切都适合我,但我只是想确保我释放所有的记忆力.

在我chrome://blob-internals查看页面后,我的担忧出现了.在调用createObjectURL并使用图像时,我注意到创建了两个条目.一个用网址 blob:blobinternal:///d17c4eef-28e7-42bd-bafa-78d5cb86e761

和另外一个

blob:http://localhost/dbfe7b09-81b1-48a4-87cd-d579b96adaf8

两者都引用了相同的本地文件路径.在呼叫时,revokeObjectURL仅删除了第二个条目chrome://blob-internals.为什么会发生这种情况,如何摆脱其他条目以及这两种类型之间的区别是什么？

此外,我已经看到人们在使用图像之前撤销URL的示例.这有什么影响？

对该主题的一些见解将非常感谢!:)

编辑:我在jsfiddle创建了一个例子.所以首先打开blobinternals并删除任何现有的blob.然后运行jsfiddle示例,并在您的计算机上选择一个图像文件.然后刷新blobinternals以查看它添加的内容.然后在我的示例中单击"撤消URL".最后刷新blobinternals以查看剩余的blob.

我做了一个简单的文件字段：

<input type="file" name="pictures_array[]" multiple accept="image/*" id="page_pictures_array" />

和一些 HTML5 文件 API 代码来列出文件：

$('.page-form #page_pictures_array').change(function(evt) {
      var file, files, reader, _i, _len;
      files = evt.target.files;
      console.log(files);
      $('#file-list').empty();
      for (_i = 0, _len = files.length; _i < _len; _i++) {
        file = files[_i];
        reader = new window.FileReader;
        reader.onload = (function(file) {
          return function(e) {
            var src;
            src = e.target.result;
            return $("<li>" + file.name + " - " + file.size + " bytes</li>").prepend($('<img/>', {
              src: src,
              "class": 'thumb'
            })).appendTo($('#file-list'));
          };
        })(file);
        reader.readAsDataURL(file); …

我可能在这里遗漏了一些简单的东西,但是如果从AJAX请求收到二进制数据,我将如何在JavaScript中创建一个File对象？

$.ajax({
  url: "http://example.com/image.jpg",
  success: function(data) {
    // Convert binary data to File object
  }
});

我正在尝试使用md5sum linux命令和CryptoJS的MD5方法获取tar文件的md5sum以产生相同的值.

我在JavaScript中(在将文件放入HTML表单后):

var reader = new FileReader();

reader.onloadend = function () {
     text = (reader.result);
}

reader.readAsBinaryString(document.getElementById("firmware_firmware").files[0]);

var hash = CryptoJS.MD5(text);

hash.toString();

在Linux中我做:

md5sum name_of_file.tar

目前这两个产生不同的结果.我怎样才能获得JavaScript来获取MD文件的内容,就像md5sum在Linux上一样？

对于一个简单的String,md5sum和CryptoJS产生相同的值.

编辑:使用名为Fred.txt的文件,内容为"Fred",md5sum和CryptoJS都生成相同的值:c624decb46fa3d60e824389311b252f6.

在update.tar文件中,linux上的md5sum给了我:1f046eedb7d8279953d233e590830e4f,在CryptoJS上它给了我:f0c3730e5a9863cffa0ba3fadd531788

Edit2:进一步的测试表明,由于文件大小很大,例如7兆字节,这实际上是一个问题

我一直在尝试使用cordova 将名为versions.txt 的文件从applicationDirectory 复制到externalApplicationStorageDirectory，但代码失败。

这是代码

var path = cordova.file.applicationDirectory + "www/Data/versions.txt";

      window.resolveLocalFileSystemURL(path,
      function gotFile(fileEntry)
      {

          window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,
              function onSuccess(fileSystem)
              { 
                      var directory = new DirectoryEntry("versions.txt", path);

                      fileEntry.copyTo(directory, 'versions.txt',
                          function()
                          {
                              alert('copying was successful')
                          },
                          function()
                          {
                              alert('unsuccessful copying')
                          });

              }, null);
      },null);

有什么帮助吗？

老实说，这里超出了我的深度，因此任何帮助或指导都会很棒。

我有一个非常基本的input表单，它允许我从本地文件夹中选择多个图像并将它们显示在页面上以及显示文件类型/名称/大小等信息。

我希望能够将图像拖放到页面中，而不是每次都手动搜索图像。这就是我被困的地方。我不知道我需要谷歌什么才能得到我想要的结果。我已经看到了很多file API我真的不太理解的东西。

这是我到目前为止所拥有的：https : //jsfiddle.net/umx1vpwy/

任何帮助将不胜感激！

代码：

function readImage(file) {

     var reader = new FileReader();
     var image = new Image();

     reader.readAsDataURL(file);
     reader.onload = function(_file) {
       image.src = _file.target.result; // url.createObjectURL(file);
       image.onload = function() {
         var w = this.width,
           h = this.height,
           t = file.type, // ext only: // file.type.split('/')[1],
           n = file.name,
           s = ~~(file.size / 1024) + 'KB';
         $('#uploadPreview').append('<img src="' + this.src + '"> ' + w + 'x' + h + …

我有一个问题(或可能是两个)使用HTML5 File API保存文件.

文件作为字节数组来自服务器,我需要保存它.我在SO上尝试了几种方法:

• 创建blob并在新选项卡中打开它
• 在href属性中使用"data:"创建隐藏的achor标记
• 使用FileSaver.js

所有方法都允许保存文件,但通过将编码更改为UTF-8来打破它,而文件(在当前测试用例中)是ANSI.似乎我遇到了问题:在服务器端和客户端.

服务器端: 服务器端是ASP.NET Web API 2应用程序,该控制器使用带有StreamContent的HttpResponseMessage发送文件.ContentType是正确的,并与实际文件类型相对应.

但是在下面的屏幕截图中可以看到服务器的答案(data.length)小于上传时计算的实际文件大小(file.size).此外可以看到HTML5 File对象还有另一个大小(f.size).

如果我将值为"ANSI"的CharSet添加到服务器的响应消息的ContentType属性中,则文件数据将与上载的相同,但是在保存结果文件时仍然具有错误的大小并且会损坏:

客户端: 我尝试使用JS File选项设置charset,但它没有帮助.正如在这里和这里可以找到的那样,FileUplaod.js的作者Eli Gray说

类型中的encoding/charset只是浏览器的元数据,而不是编码指令.

这意味着,如果我理解正确的话,就不可能改变文件的编码.

问题结果:最后我可以成功下载无法打开的损坏文件.

所以我有两个问题:

1. 如何使用File API"按原样"保存文件.目前我不能使用直接链接和'下载'属性的简单方法,因为服务器端检查请求标头中的access_token.可能这是"瓶颈"的问题？
2. 如何避免在服务器端设置CharSet并同时"按原样"发送字节数组？虽然这个问题可能会以某种方式被黑客入侵,但我认为这更为关键.例如,虽然"ANSI"字符集解决了当前文件的问题,但WinMerge显示它的编码是西里尔字母'Windows-1251',也可以是任何其他编码.

PS问题与除*.txt之外的所有文件类型(扩展名)有关.

更新

服务器端代码:

public HttpResponseMessage DownloadAttachment(Guid fileId)
{
    var stream = GetFileStream(fileId);

    var message = new HttpResponseMessage(HttpStatusCode.OK);
    message.Content = new StreamContent(stream);
    message.Content.Headers.ContentLength = file.Size;
    message.Content.Headers.ContentType = new MediaTypeHeaderValue(file.ContentType)
        {
            // without this charset files sent with bigger size
            // than they are as shown on image 1
            CharSet …

我正在使用FineUploader库上传大约 5GB 的文件。在 1MB 的块大小下一切正常，但我认为这个大小非常小，我想增加它。所以我尝试使用 10MB 并且它停止工作。尝试使用其他大小时，我发现从 4MB 或更多大小开始，上传停止工作。这里发生了什么？这是文件 API 还是浏览器的限制（我尝试过 Chrome 和 Firefox）？

我正在尝试简单地将文件上传到node.js服务器。

为此，我使用了文件API和readAsArrayBuffer。这是在触发输入文件“ change”事件以及一些hepler函数时调用的代码（并且我正在使用COBY库进行套接字发送和其他事件设置，binaryType设置为arraybuffer）：

COBY.events = {
  "file": (e) => {
       files = Array.from(e.target.files);
       startReadingFile(files[0]);
   }
};

function startReadingFile(file) {
   readFileFrom(file, 0, chunkSize, (array, r) => {
       COBY.socketSend({"start uploading a file": {
           name:file.name,
           type:file.type,
           size:file.size,
           data:(array)
       }});
       console.log("didnt something?", r, Array.from(r));
   });
}

function readFileFrom(file, start, end, callback) {
   var sliced = file.slice(start, end);
   var reader = new FileReader();
   reader.onload = (event) => {
       result = (event.target.result);
       var arr = Array.from(new Uint8Array(result));
       if(callback && callback.constructor == Function) {
           currentPosition …

Websockets支持发送 blob，但我们如何用它们发送额外的文本数据？

我的用例是文件上传器。我将每个文件切成多个部分，并一次将最多 3 个部分发送到服务器。在服务器上，我需要一种方法来识别这些切片的顺序，以便我可以重建文件。这就是为什么我需要将切片的索引与 blob 以及文件名一起发送（可以上传多个文件）