标签: fileapi

HTML 5文件上传事件

我正在尝试使用HTML文件Api上传文件,但我似乎真的不知道怎么做.我必须给getImg()函数什么事件?

HTML

<input id='img' type='file' onchange='getImg(event)'/>
Run Code Online (Sandbox Code Playgroud)

JS

function getImg(evt){
 var files = evt.dataTransfer.files;
 var file = files[0];
console.log(file.name)
Run Code Online (Sandbox Code Playgroud)

javascript html5 file-upload fileapi

3
推荐指数
1
解决办法
9696
查看次数

客户端文本文件验证和上传

我正在尝试将文件上传到浏览器并使用JavaScript访问它.这可能吗?我环顾四周,似乎你可以使用闪光灯完成这个任务.我试图看看是否有HTML5 /纯JavaScript解决方案.

我正在尝试上传CSV文件(每行包含一个可能的数据库条目)并使用javascript动态验证它.如果它通过验证,那么我将向服务器发送POST以创建项目.

html javascript html5 file-upload fileapi

3
推荐指数
1
解决办法
2547
查看次数

如何预览用户想要在网站上传的视频文件(PHP,FiileAPI JS)

我的意思是,当用户从他们的系统中选择视频文件时,让网页显示他们想要上传的文件.

我已经使用FileAPI JS预览图像文件了.我想用FileAPI JS做视频文件.

(所以,它必须在我的客户端工作)

谢谢和答案很感激:)

wordpress file-upload html5-video fileapi web

3
推荐指数
1
解决办法
5557
查看次数

将文件保存到选定目录(javascript)


你好!我的问题是关于javascript.
我想
1.要求用户选择一个目录
2.然后将我的一堆文件写入其中(可能与创建子目录)而不与用户交互

我怎样才能做到这一点?我可以吗?
我是javascript的新手,希望对你有所帮助.

PS.
我听说过要求用户通过保存文件对话框选择路径然后将数据保存到选定文件的能力,但是我想让用户一次选择目录,然后在其中创建一堆文件而不打扰每个用户.

javascript fileapi

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

从 reader.onload 事件返回变量

我正在通过读取数组JavaScript并将该数组的大小保存在 reader.onload 事件中。我认为该reader.onload函数在文件上传完成后被调用。 event.target.result存储该数组。我希望该数组保存为变量以在其他函数中使用,但是,我尝试初始化一个空数组并使用

slice 
Run Code Online (Sandbox Code Playgroud)

功能,但是没有用。控制台返回一个未定义的值。

这是代码

<!DOCTYPE html>
<html>
<head>
    <title> Home Page </title>
</head>

<body>
    <input type="file" id="file" name="files[]" multiple/>
    <output id="list"></output>

    <p id="demo"></p>

    <script>
      function handleFileSelect(evt) { 
        // grab the file that was uploaded which is type File. 
        // evt is the event that was triggered
        // evt.target returns the element that triggered the event 
        // evt.target.files[0] returns the file that was uploaded, type File
        var file = evt.target.files[0]; 

        var myArray = …
Run Code Online (Sandbox Code Playgroud)

html javascript jquery fileapi

3
推荐指数
1
解决办法
8752
查看次数

如何在IE8中输入文件?

我如何在IE(8)中获取文件,如下所示:

<input id="files" type="file">

<script>
    var file = this.files[0]; //(FF, Chrome)
</script>
Run Code Online (Sandbox Code Playgroud)

上传?

javascript internet-explorer input internet-explorer-8 fileapi

2
推荐指数
1
解决办法
3906
查看次数

如何在不引人注目的JavaScript中使用HTML5 File API?

我想将HTML5 文件API与不引人注目的JavaScript一起使用.但我只能通过从HTML调用JavaScript函数来实现它.有没有办法使用不引人注目的JavaScript的文件API?

并非所有浏览器都支持File API,但我已在Google Chrome和Firefox中尝试过此操作.

从文档中可以看出:

<input type="file" id="input" onchange="handleFiles(this.files)">
Run Code Online (Sandbox Code Playgroud)

我尝试过这种不起作用的JavaScript不起作用:

window.onload = function() {
    var input2 = document.getElementById('input2');
    input2.addEventListener('onchange', handleFiles);
}
Run Code Online (Sandbox Code Playgroud)

下面是一个完整的例子,可以在jsFiddle测试.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script>
window.onload = function() {
    var input2 = document.getElementById('input2');
    input2.addEventListener('onchange', handleFiles);
}

function handleFiles(e) {
    alert('got files');
}
</script>
</head>
<body>
<h1>Test</h1>
<input type="file" id="input1" onchange="handleFiles(this.files)"/>
<input type="file" id="input2"/>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

javascript html5 file unobtrusive-javascript fileapi

2
推荐指数
1
解决办法
779
查看次数

如何在上传文件VIA XMLHttpRequest时取得进展

我想知道如何使用XMLHTTPRequest获取文件上载的进度.在Firefox中,onprogress方法根本不会触发,而在chrome中,它只会在文件上传完成后触发.

function fileUpload(file)
{
    var formData = new FormData();
    formData.append('file', file);

    var xhr = new XMLHttpRequest();
    xhr.onprogress = function(e)
    {
        alert('progress');
    };

    xhr.open('POST', 'post.php', true);

    xhr.send(formData);  // multipart/form-data
}
Run Code Online (Sandbox Code Playgroud)

javascript html5 filereader fileapi

2
推荐指数
1
解决办法
2423
查看次数

HTML5二进制文件写作与Base64

如您所知,HTML 5提供了一个很好的FileAPI.我已经构建了一个系统,用户收到Base64编码的字符串,需要写在磁盘上(具有适当的权限,因为它是谷歌Chrome应用程序).我的代码如下:(有点清除不必要的东西)

function onInitFs(fs){      
  fs.root.getFile(fileName, {create: true}, function(fileEntry) {
    fileEntry.createWriter(function(fileWriter) {
      var bb = new window.WebKitBlobBuilder(); 
      bb.append( atob(dataInBase64Format));
      fileWriter.write(bb.getBlob());           
    }, errorHandler);
    console.log( fileEntry.toURL());
  }, errorHandler);
}
Run Code Online (Sandbox Code Playgroud)

但是,我的原始文件大小为:6302446字节,服务器以8403264字节的形式将它们作为Base64发送,但保存的文件为9242715字节.当然我明白了什么是错的,我查看了文件,它只是一个很好的字符串.没有花哨的字符出现.我假设我在文本模式下写,atob只是将它转换为另一个字符串; 我需要转换为二进制格式(在一个数组中?)并强制我的fileWriter以二进制模式而不是文本模式写入.我在网上搜索过,但找不到解决方案.我在StackOverflow上发现了这个问题谷歌Chrome Base64方法是否能够处理来自File API的二进制数据?但它没有帮助我.

如何将我的Base64字符串转换为正确的数据结构并让我的fileWriter写入它?

javascript html5 google-chrome blob fileapi

2
推荐指数
1
解决办法
8329
查看次数

File API在IE9中不起作用

我正在尝试使用jQuery从我的表单中的输入字段中获取文件大小和文件类型.我认为它的工作显然不在IE 9中.任何见解都会非常感激

var my_field = this.files[0];

var myInteger = parseInt(my_field.size);

var myType = my_field.type;
Run Code Online (Sandbox Code Playgroud)

fileapi internet-explorer-9

2
推荐指数
1
解决办法
5008
查看次数