filer.js 实现写入文件操作

2016-01-18 01:47:22 566 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

EverWHL 墨衍会员 · AI 创作全网分发关注 + 加入社区

SeaweedFS接口-Filer Server API 【代码】SeaweedFS接口-Filer Server API。阅读详情

有人用过filer.js写入文件操作吗？请求大神知道。官网下的demo本机都运行不了,我是直接打开的。
官网地址：https://github.com/ebidel/filer.js

...全文

SeaweedFS 分布式文件存储系统的技术架构和私有化部署方案 SeaweedFS 分布式文件存储系统的技术架构和私有化部署方案阅读详情

EverWHL

JavaScript 87,983 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

EverWHL 2016-01-21

打赏
举报

不管怎么说,也是实现了功能，现在结贴把。

scscms太阳光 2016-01-21

打赏
举报

看你这么努力再回复下：需要显示中文可以这样： console.log(String.fromCharCode.apply(null, new Uint8Array(this.result)));//二进制转字符(ES6范围) 改为：

var decodedString = decodeURIComponent(escape(String.fromCharCode.apply(null,new Uint8Array(this.result))));
console.log(decodedString);

并附上字符串转Uint8Array函数

    function stringToUint(string) {
        var string = btoa(unescape(encodeURIComponent(string))),
            charList = string.split(''),
            uintArray = [];
        for (var i = 0; i < charList.length; i++) {
            uintArray.push(charList[i].charCodeAt(0));
        }
        return new Uint8Array(uintArray);
    }

scscms太阳光 2016-01-20

打赏
举报

不能照抄代码。明显一些错误的需要改正。

   var filer = new Filer();
    filer.init({persistent: true, size: 2 * 1024 * 1024}, function (fs) {
    }, errorHandler);
    function errorHandler(e) {
        var msg = '';
        switch (e.code) {
            case FileError.QUOTA_EXCEEDED_ERR:
                msg = 'QUOTA_EXCEEDED_ERR';
                break;
            case FileError.NOT_FOUND_ERR:
                msg = 'NOT_FOUND_ERR';
                break;
            case FileError.SECURITY_ERR:
                msg = 'SECURITY_ERR';
                break;
            case FileError.INVALID_MODIFICATION_ERR:
                msg = 'INVALID_MODIFICATION_ERR';
                break;
            case FileError.INVALID_STATE_ERR:
                msg = 'INVALID_STATE_ERR';
                break;
            default:
                msg = 'Unknown Error';
                break;
        }
        console.log('Error: ' + msg);
    }
    //这里需要定时器，原因是初始化需要时间。官方的例子用的是异步。
    setTimeout(function () {
        filer.cd('/', function (entries) {
            //写入
            filer.write('myFile.txt', {data: '1234567890我们', type: 'text/plain'},
                    function (fileEntry, fileWriter) {
                        console.log("成功" + fileEntry.toURL());//毛都没生成!
                        //读取
                        filer.open('myFile.txt', function (file) {
                            // Use FileReader to read file.
                            var reader = new FileReader();
                            reader.onload = function (e) {
                                //console.log(this.result.byteLength);//返回二进制长度
                                console.log(String.fromCharCode.apply(null, new Uint8Array(this.result)));//二进制转字符(ES6范围)
                            };
                            reader.readAsArrayBuffer(file);
                        }, errorHandler);
                    }, errorHandler
            );
        }, errorHandler);
    }, 2000);

EverWHL 2016-01-20

打赏
举报

非常感谢@xzy21com等和大家的帮助。现在自己照着demo里面一些已经实现了，现在把代码贴出来大家一起讨论一下。刚才我试了一下您的代码,就是发现输出的中文是乱码,不过功能更已经实现了。对了上面的中文教程我感觉是在原生的js，像open,wirte这些方法感觉又像是又包装了一层。不过还有一些疑问, 1.不知道为啥需要cd / 一下而在我本机先cd/ 然后把cd/ 去掉, 删了浏览器缓存。直接write也没问题,再别人电脑上还必须cd/一下这点比较奇怪,还有打开的时候不需要cd/也是可以打开的。好了,下面是一些代码。


//写入独出文件
    function wirteTest(){
        console.log("开始写....");
        var filer = new Filer();
        function errorHandler(e) {
            console.log('Error' + e.name);
        }
        filer.init({persistent: true, size: 2 * 1024 * 1024}, function (fs) {
        }, errorHandler);
        setTimeout(function () {
            filer.cd('/', function (entries) {
                //写入
                filer.write('questionTest.html', {data: res, type: 'text/plain'},
                        function (fileEntry, fileWriter) {
                            console.log("写入成功" + fileEntry.toURL());
                            var file_name = fileEntry.name;
                            console.log("文件名字为==" + file_name);
                            //var fileWin = self.open(fileEntry.toURL());
                        }, errorHandler
                );
            }, errorHandler);
        }, 1000);

        //读取
        setTimeout(function () {
            //读取
            filer.open('questionTest.html', function(file) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    console.log("开始读...");
                    console.log(e.target.result);
                    console.log("读入成功...");
                };
                reader.readAsText(file);
            }, errorHandler);
        }, 2000);
    }

functionsub 2016-01-19

打赏
举报

没说完，接着说。

要是能这样，整个网络不是都乱套了。

去研究了一下，FILE API下面说正题：
A web app can request access to a sandboxed file system by calling

看清楚，sandboxed file system，也就是沙盒文件系统。

追寻了一下，实际操作完成后是不会生成实体文件的，所有文件的创建记录什么的都是在chrome的APPDATA文件夹里。

对应目录大概是：
C:\Users\用户名AppData\Local\Google\Chrome\User Data\Default\File System
里面有几个文件夹，其中Origins文件夹下的000003.log内容大概是这样：

可以看到这里每个域名前面都有个编号000,001,002
而在File System统计目录下就有000,001,002文件夹里面的各种 000003.log文件，打开后内容是这样的：

虽然是乱码啦，但勉强能看明白吧？

剩下的就没什么好说的了，简单一句话就是：不是你想的那样！

functionsub 2016-01-19

打赏
举报

想太多了吧？你还想跟windows可执行程序一样在你电脑里的某个目录下生成实体文件吗？

斯洛文尼亚旅游 2016-01-19

打赏
举报

引用 6 楼 EverWHL 的回复:

两个大神,能给我写个列子,就是创建并写入文件。感激不进...

你是要在硬盘上创建文件？这个好像不行。。这个是模拟的，用的是本地存储来模拟的，实际硬盘上没有写入文件，我用下载的压缩包里面的demos运行你的

引用 9 楼 EverWHL 的回复:

虽说提示alert成功了，但是不知道生成到哪里去了,本机没看见有这个文件 [quote=引用 7 楼 xzy21com 的回复:]

<script>
  var filer = new Filer();
  filer.init({persistent: true, size: 1024 * 1024}, function(fs) {},onError);
  function onError(e) {
    console.log('Error' + e.name);
  }
  setTimeout(function(){
    filer.cd('/', function(entries) {     
		filer.write('111.txt', {data: '1234567890', type: 'text/plain'},
		  function(fileEntry, fileWriter) {
			alert("成功");//毛都没生成!
		  },onError
		);
    }, onError);
  },1000);
</script>

[/quote] 写不到系统硬盘的，应高用localstorage来模拟写入删除的，实际并不是操作系统硬盘上的文件

EverWHL 2016-01-19

打赏
举报

虽说提示alert成功了，但是不知道生成到哪里去了,本机没看见有这个文件

引用 7 楼 xzy21com 的回复:

<script>
  var filer = new Filer();
  filer.init({persistent: true, size: 1024 * 1024}, function(fs) {},onError);
  function onError(e) {
    console.log('Error' + e.name);
  }
  setTimeout(function(){
    filer.cd('/', function(entries) {     
		filer.write('111.txt', {data: '1234567890', type: 'text/plain'},
		  function(fileEntry, fileWriter) {
			alert("成功");//毛都没生成!
		  },onError
		);
    }, onError);
  },1000);
</script>

EverWHL 2016-01-19

打赏
举报

是什么都没生成,所以希望用过的大神能给个生成文件的列子,感激不进

引用 7 楼 xzy21com 的回复:

<script>
  var filer = new Filer();
  filer.init({persistent: true, size: 1024 * 1024}, function(fs) {},onError);
  function onError(e) {
    console.log('Error' + e.name);
  }
  setTimeout(function(){
    filer.cd('/', function(entries) {     
		filer.write('111.txt', {data: '1234567890', type: 'text/plain'},
		  function(fileEntry, fileWriter) {
			alert("成功");//毛都没生成!
		  },onError
		);
    }, onError);
  },1000);
</script>

EverWHL 2016-01-19

打赏
举报

@functionsub @showbo @xzy21com 我现在还有个页面用的就是api上面给的方法，但是报错,说BlobBuilder没有这个方法。大家再集思广益.谢谢！！


function onInitFs(fs) {
 
  fs.root.getFile('log.txt', {create: true}, function(fileEntry) {
 
    // Create a FileWriter object for our FileEntry (log.txt).
    fileEntry.createWriter(function(fileWriter) {
 
      fileWriter.onwriteend = function(e) {
        console.log('Write completed.');
      };
 
      fileWriter.onerror = function(e) {
        console.log('Write failed: ' + e.toString());
      };
 
      // Create a new Blob and write it to log.txt.
      var bb = new (); // Note: window.WebKitBlobBuilder in Chrome 12.
      bb.append('Lorem Ipsum');
      fileWriter.write(bb.getBlob('text/plain'));
 
    }, errorHandler);
 
  }, errorHandler);
 
}
 
window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);

functionsub 2016-01-19

打赏
举报

内容好像是放在红框里的文件里了。名字是类似000000,0000001这样的。

EverWHL 2016-01-19

打赏
举报

对了,大家说我的思路现在应该没什么大问题把,先写一个,然后再读下。嘿嘿

EverWHL 2016-01-19

打赏
举报

好的,我在我本地也找到您说的文件了。可能是我理解错了，确实不能在本地硬盘上写入文件。
但是不知道它这生成的文件搁在哪里了,不知道是不是放到缓存里面了,我看了下浏览器里面的东西又什么都没有。
什么Cookies等等的。
我现在的思路是这样,既然不能写入本地文件,假如现在写的东西在浏览器的缓存里面,那我就写完之后再读取写到浏览器的文件内容。我现在就开始试试咯,希望大家的继续帮我集思广益的,由衷感谢。
咱们CSDN大论坛还是很有爱的。@xzy21com @showbo @functionsub 非常感谢

引用 12 楼 functionsub 的回复:

没说完，接着说。

要是能这样，整个网络不是都乱套了。

去研究了一下，FILE API下面说正题：
A web app can request access to a sandboxed file system by calling

看清楚，sandboxed file system，也就是沙盒文件系统。

追寻了一下，实际操作完成后是不会生成实体文件的，所有文件的创建记录什么的都是在chrome的APPDATA文件夹里。

对应目录大概是：
C:\Users\用户名AppData\Local\Google\Chrome\User Data\Default\File System
里面有几个文件夹，其中Origins文件夹下的000003.log内容大概是这样：

可以看到这里每个域名前面都有个编号000,001,002
而在File System统计目录下就有000,001,002文件夹里面的各种 000003.log文件，打开后内容是这样的：

虽然是乱码啦，但勉强能看明白吧？

剩下的就没什么好说的了，简单一句话就是：不是你想的那样！

scscms太阳光 2016-01-18

打赏
举报

<script>
  var filer = new Filer();
  filer.init({persistent: true, size: 1024 * 1024}, function(fs) {},onError);
  function onError(e) {
    console.log('Error' + e.name);
  }
  setTimeout(function(){
    filer.cd('/', function(entries) {     
		filer.write('111.txt', {data: '1234567890', type: 'text/plain'},
		  function(fileEntry, fileWriter) {
			alert("成功");//毛都没生成!
		  },onError
		);
    }, onError);
  },1000);
</script>

EverWHL 2016-01-18

打赏
举报

两个大神,能给我写个列子,就是创建并写入文件。感激不进...

EverWHL 2016-01-18

打赏
举报

现在demo可以访问了,但是现在我自己写的功能是想写入文件缺不好用。请大神指导



<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="chrome=1" />

<title>HTML5 Filesystem Playground</title>

</head>

<body>

11

<script src="../src/filer.js"></script>

<script>

	var filer = new Filer();

	  filer.init({persistent: false, size: 1024 * 1024}, function(fs) {

	   filer.size == Filer.DEFAULT_FS_SIZE

	   filer.isOpen == true

	   filer.fs == fs

	}, onError);

	function onError(e) {

		  console.log('Error' + e.name);

	}

	filer.write('111.txt', {data: '1234567890', type: 'text/plain'},

	  function(fileEntry, fileWriter) {

		alert("成功");

	  },

	  onError

	);

</script>

</body>

</html>