html5 requestFileSystem相关创建读写文件Demo-静水博客

html5 requestFileSystem相关创建读写文件Demo

2016/04/18 标签： html5

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript">
//创建文件
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
function addFile(fileNameN,fileContentN){
  window.requestFileSystem('window.TEMPORARY', 5*1024*1024, function(fs){initFS(fs,fileNameN,fileContentN);}, function(err){console.log(err);});
  function initFS(fs,fileNameN,fileContentN,callBack){
      /***fs.root.getDirectory('Documents', {create: true}, function(dirEntry) {
        console.log(dirEntry);
        console.log(4444);
      alert('You have just created the ' + dirEntry.name + ' directory.');
    }, errorHandler);***/
    callBack=callBack;
      fs.root.getFile(fileNameN, {create: true, exclusive: true}, function(fileEntry) {//找到文件，没有则创建
          console.log(fileEntry);
          console.log(callBack);
        fileEntry.createWriter(function(fileWriter,callBack) {//文件写入
            fileWriter.seek(fileWriter.length);
            window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder;
            var bb = new Blob(fileContentN,{type:'text/javascript'});
            fileWriter.write(bb);
            fileWriter.onwriteend = function(e,callBack) {
             console.log(fileEntry.toURL());
    //         console.log(paths);
            };
          }, function(error){
            console.log(error);
          });
        }, function(err){
            console.log(err);
        });
    }
}
    addFile('test.html',['<div style='color:#f00'>hello world!</div>']);
    addFile('test.jpg',['base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATBAMAAACAfiv/AAAAFVBMVEX2wQD3xxj3xxn3yBv87bX87bb///8y+jRvAAAALElEQVR42mMIYoAApgAGBSgTwcAC0hKIZaaBQAIeJimGYQNwZwowOEJZzA4AJtUO47C7FQMAAAAASUVORK5CYII=']);
//创建文件结束

//读取文件开始
window.resolveLocalFileSystemURL = window.resolveLocalFileSystemURL || window.webkitResolveLocalFileSystemURL;
var url='filesystem:http://'+window.location.host+'/temporary/';
var files=[];
window.resolveLocalFileSystemURL(url,function(fileEntry){
 var dirReader = fileEntry.createReader();
 dirReader.readEntries(function(results){
   if(!results.length){
    console.log("没有文件！");
   }else{
     console.log("读取到" + results.length + "个文件");
    for(var i = 0; i < results.length; i++){
         var fileEntryN=results[i];
         if(results[i].file){
           results[i].file(function(data){
            var fr=new FileReader();
             fr.readAsText(data,'utf-8');
             fr.onload=function(){
              console.log(data.name);
              console.log(this.result);
             }
           });
        }
       }
     }
   },function(err){

   });
},function(err){});
//结束

//下载文件
window.resolveLocalFileSystemURL(url,function(fileEntry){
 var dirReader = fileEntry.createReader();
 dirReader.readEntries(function(results){
   if(!results.length){
    console.log("没有文件！");
   }else{
     console.log("读取到" + results.length + "个文件");
    for(var i = 0; i < results.length; i++){
         var fileEntryN=results[i];
         if(results[i].file){
           results[i].file(function(data){
            var fr=new FileReader();
            console.log(fr);
             fr.readAsDataURL(data,'utf-8');
             fr.onload=function(){
                var a=document.createElement('a');
              a.href=this.result;
              a.innerText='下载';
              console.log(a);
              a.download='fda';
              document.getElementsByTagName('body')[0].appendChild(a);
              console.log(this.result);
             }
           });
        }
       }
     }
   },function(err){

   });
},function(err){});
//下载文件结束

/***参考文档
https://developer.mozilla.org/en-US/docs/Web/API/FileEntry
http://www.gbtags.com/technology/html/20120411html5fileapi/
https://developer.mozilla.org/en-US/search?q=dirEntry
http://blog.csdn.net/salonzhou/article/details/28275713
http://zhidao.baidu.com/link?url=RieDd8Y8AfgQL9NC9fD7A4veGD5KKYj96nP5HQ2SZjc4kN2gtRGl2-rtVYIdztGT5KkhSnMHZjxdUme1AlXqSK
http://www.cnblogs.com/mlzs/p/3825090.html
***/
    </script>
    </body>
</html>

上一篇: 购物详情页面加入阿里旺旺客服代码兼容手机端

下一篇: jquery将页面内的svg转换为png图片并下载

静水缘首页

刘丕水+宋静静于2007年9月相识于山东理工大学，毕业后2011年相恋，共甘苦，历时四年，终于在11月23号拿到了红本本，组建了自己的小家庭......

快速发布

静水缘首页

文章分类

最新文章