标签: fileapi

HTML5 File API简单检查文件是否存在

我有一个临时的文件API存储(HTML5),但我无法检查文件是否存在.有没有简单的方法来检查它?我是否必须实际尝试阅读该文件才能找到答案?

搜索周围没有任何具体的结果

同步检查会很好吗?

javascript html5 fileapi

6
推荐指数
1
解决办法
5924
查看次数

创建一个FileList并将其复制到File输入

我正在尝试创建一个拖放区域,它将通过webkitGetAsEntry获取dataTransfer项目,并检查该条目是目录还是文件.

然后,我希望能够将文件转换为FileList并将其复制到文件输入(将在发布之前进行验证和处理).

的jsfiddle

  function handleDrop(event) {
        event.preventDefault();
        event.dataTransfer.dropEffect = 'copy';
        var length = event.dataTransfer.items.length;
        var elFileInput = document.getElementById('File');
        for (var i = 0; i < length; i++) {
            var entry = event.dataTransfer.items[i].webkitGetAsEntry();
            if (entry.isFile) {
                convertFilesToFileObjects(entry);          
            } 
            else if (entry.isDirectory) {
                var dirReader = entry.createReader();
                dirReader.readEntries(function(entries) {
                    for (var j = 0; j < entries.length; j++) {
                        convertFileEntrysToFileObjects(entries[j]);
                    }
                });
            }
        }   
        function convertFileEntrysToFileObjects(fileEntry) {        
            var addFileToInput = function (file) {
                console.log(file);
                //elFileInput.files = event.dataTransfer.files;
                //Need to make …
Run Code Online (Sandbox Code Playgroud)

javascript html5 google-chrome fileapi

6
推荐指数
1
解决办法
8554
查看次数

如何生成一个文件,并提供它在普通的JavaScript下载?

我想动态生成javascript文本文件,然后提供下载.目前,我可以通过以下任一解决方案获得此工作:

content = "abc123";
document.location = "data:text/octet-stream," + encodeURIComponent(content);
Run Code Online (Sandbox Code Playgroud)

要么

content = "abc123";    
var bb = new BlobBuilder();
bb.append(content);
var blob = bb.getBlob();
blob = blob.slice(0, blob.size, 'text/octet-stream');
var fr = new FileReader(); 
fr.onload = function() {document.location = this.result;}
fr.readAsDataURL(blob);
Run Code Online (Sandbox Code Playgroud)

但是,当下载框出现时,这两种解决方案只会在另存为对话框中提供默认文件名"下载".

我的问题基本上是,如何将其更改为特定的文件名,例如'readme.txt'或'scene.obj'

另请注意,数据类型以前是"text/plain",但是如果使用此文档,则文档会切换到新的文本文档,而不是提供下载(如text/octet-stream似乎那样).

我不想要一个flash解决方案,javascript/html5只有建议.

干杯,乔希

javascript html5 blob download fileapi

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

通过表单将文件上传到Drupal 7后,如何获取文件的路径?

我有一个表单,将文件上传到我的Drupal安装.我想在表中存储该文件的路径.如何获取最近上传的文件的路径?我试过了

$f = file_load($form_state['values']['field_file']);
$f->uri;
Run Code Online (Sandbox Code Playgroud)

但那不起作用.有线索吗?

php drupal fileapi

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

使用CORS的跨域分块上传

我有用户提交的文件,我试图以10 MB的块上传.我目前正在使用原始XMLHttpRequest(和XDomainRequest)来推送File.prototoype.slice前端的每个切片().后端是使用上传模块的 Nginx .

仅供参考,以下是我如何使用的概要slice:

element.files[0].slice(...)
Run Code Online (Sandbox Code Playgroud)

据我所知,跨浏览器的前缀的方法webkitSlice,并mozSlice和所有.

我遇到的问题是实际发出跨域请求.我是从上传server.localupload.server.local.在Firefox中,options请求通过正常,然后实际post失败.在Chrome和Opera中,options请求失败

 OPTIONS https://URL Resource failed to load
Run Code Online (Sandbox Code Playgroud)

以下是Firefox的标题:

请求标题

OPTIONS /path/to/asset HTTP/1.1
Host: upload.server.local:8443
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:18.0) Gecko/20100101 Firefox/18.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Origin: https://server.local:8443
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-disposition,content-type,x-content-range,x-session-id
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Run Code Online (Sandbox Code Playgroud)

响应标题

HTTP/1.1 204 No Content
Server: nginx/1.2.6
Date: Wed, 13 Feb 2013 …
Run Code Online (Sandbox Code Playgroud)

nginx xmlhttprequest cross-domain cors fileapi

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

如何在离线Web应用程序的上下文中本地存储文件字段选择?

我正在开发一个支持离线功能的HTML5 Web应用程序,该应用程序收集用户的多个表单字段和多个文件(通常是图像)。我们需要允许这些用户选择要上传的照片,然后才能实际上传照片(也许当他们仍处于离线状态时)。当他们上网时,可以提交表格并上传文件。

如何保存此信息?这些文件太大,无法直接存储在localStorage中。我可以使用localStorage替代地存储对文件的某种引用,然后在稍后调用以进行上传吗?我可以以某种方式使用应用程序缓存吗?

javascript html5 offline local-storage fileapi

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

非HTML5浏览器使用XMLHttpRequest发送原始文件内容

有没有办法读取文件的原始文件内容,并使用XMLHttpRequest ajax请求将二进制数据发送到服务器?在HTML5浏览器中,我可以这样做:

reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function(e) {
   xhr.send(e.target.result);
} 
Run Code Online (Sandbox Code Playgroud)

有一些库,如FileAPIFileReader polyfill,但它们都不支持readAsArrayBuffer(),如果我使用readAsBinaryString()二进制数据将在转换为String时被搞砸,并且额外的字符将被添加到内容中.

有什么建议?

javascript flash filereader fileapi arraybuffer

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

逐块下载文件客户端块

我正在使用WebRTC将文件发送到已连接的对等方,并且正在将文件分块发送。但是,我在弄清楚如何让对等方逐块地流式传输时保存/下载文件时遇到了麻烦。

我在网上找到的所有示例都建议这样做:

// sender
dataConnection.send({
   'file': file
});

// receiver
dataConnection.on('data', function(fileData) {

    var dataView = new Uint8Array(fileData);
    var dataBlob = new Blob([dataView]);
    var url = window.URL.createObjectURL(dataBlob);

    // create <a>
    var link = document.createElement('a');
    link.href = url;
    link.download = fileName;
    document.body.appendChild(link);

    // trigger the download file dialog
    link.click();
}
Run Code Online (Sandbox Code Playgroud)

但是,这种方法不支持获取文件的大块并在出现每个大块时对其进行写...它必须等待整个文件在发送方读取并发送到接收方。

我想做的是这样的:

// sender
for (var i = 0; i < fileSize; i += chunkSize) {

    var fileReader = new FileReader();

    // read next chunk
    var blob = file.slice(start, end);
    ... …
Run Code Online (Sandbox Code Playgroud)

html5 blob chunking fileapi webrtc

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

在新选项卡中从POST打开PDF

我需要做什么 :

我需要在Firefox新标签中打开文件(其他浏览器支持并不重要)

文件名需要与Content-Disposition相匹配.

所以我将POST中的数据发送到服务器,然后我收到一个PDF文件作为回应.响应的标题是(示例):

Content-Type: application/pdf 
Access-Control-Expose-Headers: Content-Disposition
Content-Disposition: attachment; filename="file name.pdf" 
Content-Length: 234
Run Code Online (Sandbox Code Playgroud)

我的回答是PDF文件本身.(Blob - > application/pdf)

此外,它可以同时有多个请求

做了什么:

现在文件在新窗口中打开,但文件名错误(文件名不可用).它也被Firefox阻止了.

我的代码(不是全部,只有重要部分):

var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function(){
                    if (this.readyState == 4 && this.status == 201){
                        var filename = this.getResponseHeader('Content-Disposition').split('=')[1];
                        filename = filename.substr(1, filename.length-2);

                        var url = window.URL.createObjectURL(this.response);
                        window.open(url);
                    }
                };
                xhr.open('POST', host + this.getLink('preview', this.collection.jsonSchemaSwapData).href);

                xhr.setRequestHeader("Content-type","application/json");
                xhr.responseType = 'blob';
                xhr.send(JSON.stringify(this.toJSON()));
Run Code Online (Sandbox Code Playgroud)

问题:

  • 浏览器将新选项卡阻为弹出窗口(一个元素,然后点击它也被阻止)
  • CreateObjectURL不适用于文件名 …

javascript pdf xmlhttprequest content-disposition fileapi

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

使用正确的文件名而不是src ="blob ..."将文件对象转换为图像

我有一个myFile在控制台中看起来像这样的File对象:

File {
  name: "myimage.jpg", 
  lastModified: 1465476925001, 
  lastModifiedDate: Thu Jun 09 2016 14:55:25 GMT+0200 (CEST), 
  size: 33002
  type: "image/jpeg"
}
Run Code Online (Sandbox Code Playgroud)

但是当我用它创建一个图像时

var image = new Image();
image.src = URL.createObjectURL(myFile);
Run Code Online (Sandbox Code Playgroud)

我明白了:

<img src="blob:http://myurl.com/6b2b83d8-ac36-40c1-8ab1-c4f07b019ba5">
Run Code Online (Sandbox Code Playgroud)

当我尝试右键单击保存文件时,文件名为空或"6b2b83d8-ac36-40c1-8ab1-c4f07b019ba5"而不是"myimage.jpg".文件对象中的文件名已消失.有没有办法设置图像文件名?

javascript image image-processing filereader fileapi

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