标签: fileapi

使用 Web 浏览器和客户端 JavaScript 将文件逐块写入磁盘

最新的 Chrome、Firefox 或 IE 是否可以要求用户提供文件的“另存为”位置,然后使用您自己的 javascript 算法“附加”字节到所需/按用户选择的位置逐块写入文件。让我澄清一下:

  1. 要求用户指定文件名的另存为位置,例如:C:\ggg.png(但数据尚未保存)
  2. 之后能够以编程方式在某些 Blob 或其他内容中逐块写入数据吗?

html javascript browser google-chrome fileapi

5
推荐指数
0
解决办法
1350
查看次数

下载大文件

我有一个表示为块列表的文件,目标是下载所有块,加入并保存为文件。

要求

  1. 它应该适用于大文件
  2. 应该是跨浏览器的解决方案

我发现了什么...

  1. 使用 JS 数组
    是的,我们可以下载所有块并将其存储在常规 Javascript 数组中。
    • 这是跨浏览器的解决方案
    • 但它使用 RAM,如果文件大小超过可用内存,浏览器就会崩溃......
  2. 文件保存器.js
    • 部分跨浏览器
    • 文件大小有限
  3. StreamSaver.js
    • 不跨浏览器
    • 适用于大文件
  4. 文件系统API
    • 这是 Chrome 沙箱文件系统 api
    • 适用于大文件

但我仍然无法实现我的目标与覆盖的要求...
如果有人有最佳解决方案的经验,我恳请在这里分享。谢谢

javascript download fileapi

5
推荐指数
1
解决办法
9689
查看次数

Blob 的 DataUri 与 Base64 字符串 DataUri

正如您所知并在 w3 中所述,可以使用 Blob 的 createObjectUrl 在 javascript 中为 Blob 对象创建 url。另一方面,如果我们有一个 Base64 编码字符串的数据,我们可以将其呈现为格式为“data[MIMEType];base64,[data>]”的 Url

假设我有一个 Base64 编码的字符串,它是从当今非常流行的图像生成的:)维基百科中的“红点”图像。

var reddotB64 = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg";
Run Code Online (Sandbox Code Playgroud)

我 100% 确定,如果我创建一个符合上述数据 URI 方案的 URL,那么我将能够放置一个链接元素并从浏览器下载它:请参阅下面的代码示例:

var reddotB64 = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg";
var reddotLink = document.createElement("a");
reddotLink.target = "_blank";
reddotLink.href = "data:image/png;base64," + reddotB64;
document.body.appendChild(reddotLink);
reddotLink.click();
document.body.removeChild(reddotLink);
Run Code Online (Sandbox Code Playgroud)

这工作得很好,并在新选项卡中显示图像。另一方面,我将尝试使用 Blob 创建链接,如下所示:

var reddotB64 = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg";
var reddotBlob = new Blob([atob(reddotB64)], { type: 'image/png' });
var reddotLink = document.createElement("a");
reddotLink.target = "_blank";
reddotLink.href = URL.createObjectURL(reddotBlob);
document.body.appendChild(reddotLink); …
Run Code Online (Sandbox Code Playgroud)

javascript base64 blob fileapi data-uri

5
推荐指数
1
解决办法
6857
查看次数

在 Javascript 中从本地路径创建文件或 Blob

我已经广泛而系统地搜索了堆栈溢出的答案,但未能找到适合我需要的答案。

我正在尝试将多个文件上传到 Firebase Storage,这需要 File 或 Blob 对象。

var file = ... // use the Blob or File API
ref.put(file).then(function(snapshot) {
  console.log('Uploaded a blob or file!');
});
Run Code Online (Sandbox Code Playgroud)

我的项目中有一个文件夹,其中包含我要上传的所有文件,并且我正在尝试使用其路径创建此类对象。然而,我的所有尝试都没有成功。

我尝试导入文件:

let file = require('./Images/imagename.jpg');
Run Code Online (Sandbox Code Playgroud)

我研究了使用“fs”、文件 API 和其他选项,但似乎没有一种方法可以让我仅使用路径将文件放入对象中。

简而言之:是否有任何简单的方法可以从本地路径获取对象?

javascript blob node.js fileapi firebase-storage

5
推荐指数
1
解决办法
7495
查看次数

如何将图像源转换为 JavaScript File 对象

我有一个图像 URL "https://cdn.shopify.com/s/files/1/0234/8017/2591/products/young-man-in-bright-fashion_925x_f7029e2b-80f0-4a40-a87b-834b9a283c39.jpg",想将其转换为 javaScript 文件类型对象。

: File
   lastModified: 1591250106736
   lastModifiedDate: Thu Jun 04 2020 11:25:06 GMT+0530 (India Standard 
   Time) {}
   name: "7.jpeg"
   size: 369742
   type: "image/jpeg"
   webkitRelativePath: ""
Run Code Online (Sandbox Code Playgroud)

node.js fileapi reactjs

5
推荐指数
3
解决办法
5236
查看次数

如何从 javascript 对象在内存中创建 Json 文件?

我有一个仅接受 json 文件的后端端点。用户应该上传一个 Json 文件,然后应用程序将该文件提交到端点并且它工作正常。现在我想使用相同的端点来上传由代码创建的 json 文件,例如我想采用以下 javascript 对象

{
    name: 'Brian',
    age: 40
}
Run Code Online (Sandbox Code Playgroud)

并将其转换为 File 对象,以便我可以将其作为文件而不是对象提交。我尝试使用 File Api 构造函数,如下所示:

    new File([{ name: 'Brian', age: 40 }], "file.json", { type: "application/json" });
Run Code Online (Sandbox Code Playgroud)

但端点不接受它,我假设第一个参数的格式不正确......它应该是一个 blob 吗?

javascript json fileapi

5
推荐指数
1
解决办法
3577
查看次数

以编程方式将文件上载并保存到Drupal节点

我正在尝试基于自定义表单提交创建节点.一切都很好,除了上传的图像.

我可以捕获它们并将它们设置在表单对象缓存中.当我将数据传递给函数来创建节点时,我收到此错误:

"无法复制指定的文件,因为不存在该名称的文件.请检查您是否提供了正确的文件名."

我也多次收到错误,尽管一次只提交一个或两个图像.

这是我正在使用的代码.$ uploads是传入的,是上一步中从file_save_upload()返回的文件对象数组:

if (isset($uploads)) {
    foreach ($uploads as $upload) {
      if (isset($upload)) {
        $file = new stdClass;
        $file->uid = 1;
        $file->uri = $upload->filepath;
        $file->filemime = file_get_mimetype($upload->uri);
        $file->status = 1;  

        $file = file_copy($file, 'public://images');

        $node->field_image[$node->language][] = (array) $file;
      }
    }
  }

  node_save($node);
Run Code Online (Sandbox Code Playgroud)

我也试过这个:

if (isset($uploads)) {
    foreach ($uploads as $upload) {
        $upload->status = 1;  

        file_save($upload);

        $node->field_image[$node->language][] = (array) $upload;
      }
    }
  }

  node_save($node);
Run Code Online (Sandbox Code Playgroud)

第二个导致URI字段中的MySQL出现重复键错误.我在教程中看到过这两个例子,但两个都没有用?

drupal drupal-7 fileapi

4
推荐指数
2
解决办法
2万
查看次数

FileReader.js在IE9中没有任何反应

我需要帮助设置Jadriens FileReader.js.我已经设置了所有内容,因为我认为这个polyfill工作.但是,当IE9启动所有内容时触发的回调不会触发.这是我的标记:

<body>
<div class="main">
    <canvas id="mainCanvas" width="600" height="600"></canvas><br />
    <div id="fileReaderSWFObject"></div>
    <input type="file" id="imageLoader" name="imageLoader" /><br />
    <input id="text" type="text" placeholder="some text...">
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.1.min.js"><\/script>')</script>
<!--[if lt IE 10]>
    <script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
    <script src="js/vendor/jquery-ui-1.8.23.custom.min.js"></script>
    <script src="js/vendor/jquery.FileReader.min.js"></script>
<![endif]-->
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
Run Code Online (Sandbox Code Playgroud)

这是main.js:

$(function () {
// Variables
var canvas = document.getElementById('mainCanvas');
var context = canvas.getContext('2d');
var canvasCenter = canvas.width / 2;
var img = '';
var newImageHeight = 0;
var logoX = 0; …
Run Code Online (Sandbox Code Playgroud)

javascript flash fileapi internet-explorer-9 polyfills

4
推荐指数
1
解决办法
8874
查看次数

使用HTML 5 File API加载JSON文件

我希望用户能够在那台计算机上选择一个JSON文件,然后应该将这个JSON文件提供给客户端Javascript.

我如何使用FILE API执行此操作,最终目标是用户选择的JSON文件可用作对象,然后我可以在Javascript中使用它.这是我到目前为止:

JsonObj = null 



function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
     f = files[0];
      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
         JsonObj = e.target.result
         console.log(JsonObj);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }



document.getElementById('files').addEventListener('change', handleFileSelect, false);
Run Code Online (Sandbox Code Playgroud)

FIDDLE:http://jsfiddle.net/jamiefearon/8kUYj/

我如何将变量JsonObj转换为适当的Json对象,可以添加新的字段等.

html5 json fileapi

4
推荐指数
1
解决办法
1万
查看次数

通过引用将提交的文件传递给Web Worker,并且开销尽可能小

我将有一个网络工作者来解析巨大的文本文件(200000行,尽管语法简单)。我希望用户通过拖放即可提交该文件,否则将获得一个File对象:

   var work = new Worker("parser.js")
   document.addEventListener("drop", function(e) {
       e.preventDefault();
       var dt    = e.dataTransfer;
       var files = dt.files;
       if(files.length>0) {
         var firstFile = files[0]
         var reader = new FileReader();
         //SEND FILE TO WORKER?
       }
   });
Run Code Online (Sandbox Code Playgroud)

我听说了可转让的对象。有没有办法文件传输到Worker?以某种方式,GUI线程不会因读取文件而变慢?

javascript web-worker fileapi transferable

4
推荐指数
1
解决办法
2042
查看次数