标签: fileapi

Firefox 3.6 让您将目录拖放到某个元素上（使用拖放 API）并使用 FileAPI 处理这些文件。它如何与目录一起使用？

Mac OS X Finder 将某些目录显示为文件（.app、.tmbundle、.abbu、\xe2\x80\xa6）。在大多数情况下，这很棒。在通过 File- 和 DND-API 与浏览器交互的情况下，情况并非如此。最终用户无法区分真实文件和类似 my-addressbook-backup.abbu 的文件。

因此，Javascript UI 必须能够识别目录结构。如果它无法遍历该结构，则必须相应地通知用户。

关于如何实现其中任何一个的想法？

编辑：

我可以看到允许 JS 遍历目录时出现的（潜在的）问题。我本身并不要求进行目录遍历（尽管我不会要求能够这样做）。我说的是 Foo.app 被视为一个文件（如用户通过 Finder.app 看到的那样），但实际上是一个目录（如在 Terminal.app 中查看它时看到的那样）。

文件 API 目前不提供任何遍历机制。因此，addressbook-dump.abbu 中更深层次的嵌套文件将无法访问。有什么想法可以让这一切成为可能吗？

否则我必须告诉我的 OSX 用户将他们的地址簿文件存档（例如 ZIP）并“上传”该 zip（我实际上可以在 JS 中读取）。尽管这是一种解决方法，而不是解决方案。

我喜欢在div上添加背景,仅适用于支持拖放文件的浏览器

我不喜欢使用modernizr,只是一行脚本

我正在关注Html5rocks教程

http://www.html5rocks.com/en/tutorials/file/dndfiles/

我试图在切片文件示例中使用readAsArrayBuffer而不是readAsBinaryString(因为我想读取gif头来查找文件解析).但我被卡住了,因为evt.target.result(使用readAsBinaryString时它是一个字符串)

有任何想法吗？

编辑:代码

reader.onloadend = function(evt) 

{

  if (evt.target.readyState == FileReader.DONE) { // DONE == 2
    document.getElementById('byte_content').textContent = evt.target.result;
    console.log(evt.target.result.byteLenght)
    document.getElementById('byte_range').textContent = 
        ['Read bytes: ', start + 1, ' - ', stop + 1,
         ' of ', file.size, ' byte file'].join('');
  }
};

if (file.webkitSlice) {
  var blob = file.webkitSlice(start, stop + 1);
} else if (file.mozSlice) {
  var blob = file.mozSlice(start, stop + 1);
}
reader.readAsArrayBuffer(blob);
}

所以在Firefox 13中我进入屏幕:[object ArrayBuffer]

并在控制台日志上:undefined

在Chromium 18中,我进入控制台:Uncaught TypeError:无法读取null的属性'byteLenght'

我正在一个网站上工作,该网站将打包在.exe文件中.因此该网站将仅在线下使用.现在我需要解析一个本地的xml文档.如何使用html5文件api获取本地文件的文件句柄？

编辑:我不想使用<input...>或拖动文件到浏览器.

在我的 HTML 代码中，我有以下 IMG 标签：

<img src="picture.png"  id="picture" />

我想在图像 Blob 对象（https://developer.mozilla.org/en-US/docs/Web/API/Blob）中创建（以在 FirefoxOS 网络活动中进一步使用它）拥有它的 uri（“picture.png ”）。我想我需要与 URL.createObjectURL 以相反方式工作的方法：

https://developer.mozilla.org/en-US/docs/Web/API/URL.createObjectURL

我在 Vue 中的文件输入上构建了一个简单的拖放图像预览。它工作正常，但是当图像被拖到放置区上时，我想添加一个类，以便它突出显示该区域，当您将鼠标悬停在它上面时它已经这样做了。

HTML：

<div id="wrapper">
  <upload-image help="Specific requirements for this dropzone"></upload-image>
</div>

<template id="dropzone">
  <div v-if="!image">
      <div class="dropzone-area" drag-over="handleDragOver">
          <div class="dropzone-text">
              <span class="dropzone-title">Drop image here or click to select</span>
              <span class="dropzone-info" v-if="help">{{ help }}</span>
          </div>
          <input type="file" @change="onFileChange">
      </div>
  </div>
  <div class="dropzone-preview">
      <img :src="image" />
      <button @click="removeImage" v-if="image">Remove</button>
  </div>
</template>

JavaScript (Vue.js)：

Vue.component('upload-image', {

  template: '#dropzone',

  props: ['help'],

  data() {
      return {
          image: ''
      }
  },

  methods: {
      onFileChange(e) {
          var files = e.target.files || e.dataTransfer.files;
          if (!files.length) return; …

我有一个很大的 rar 文件。要解压缩它，我必须使用这个库unrar.js

我正在测试的 blob 大约为 23MB，要 readAsArrayBuffer 然后将其提供给 unrar.js 我必须对其进行切片。

出于某种原因， unrar.js 不能很好地与切片 blob 配合使用——如果切片 blob 范围不是以 0 开头或以 blob.size 结尾，它会抛出一个未知的存档类型错误。-奇怪的？-

我能想到的唯一解决方法是将 blob 作为切片读取，然后在 onloadend 函数中再次将其收集回来。-这可能吗？-

将数组缓冲区收集到一个数组中，然后将其提供给 unrar.js 以解压缩文件，就好像它是从一个 blob 中读取的一样。

如果这听起来对你来说太烦人了，我会很感激在 javascript/phonegap 环境中读取 rar 文件的任何其他方式。

webkitStorageInfo.queryUsageAndQuota()用于查找使用我认为的HTML5文件系统API存储在文件系统中的文件的使用情况统计信息.任何人都可以给我提供可以在提供给该函数的回调中获得的详细信息.

window.webkitStorageInfo.queryUsageAndQuota(webkitStorageInfo.PERSISTENT, function() {
   //what all details can be obtained in this function as its arguments?
})

我有一个文件输入

<input type="file" ng-change="action()">

现在在我的控制器中我不想做选择器和东西.所以我才有

$scope.action = () -> 
  ...

但是,我想要一个特定的行为,只要用户选择一个文件调用$ scope.action,而不是onchange是否有角度的onselect事件？

我需要一些javascript大师.我有这个代码:

handleImage(new File([blob], blob.name, {type: blob.type})).done(/* something */)

和

handleImage = function (image) {
        // create some fake form data
        var formData = new FormData();
        formData.append("attachment", image);
        formData.append("auto", true);
        formData.append("_csrf", "xxxxxxxxx");

        // post to the server.
        return $.ajax({
            url: "/some/url",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            error: function () {
                console.log("error");
            }
        });

这适用于Chrome和Firefox,但在使用Safari(10.1.1)时,服务器(java/spring mvc)会在MultipartHttpServletRequest空文件中收到"附件".所以在我看来,new File([blob], blob.name, {type: blob.type})某种程度上是失败的.

知道这里有什么问题吗？