您的位置是:网站首页>Javascript编程Javascript编程

学会用JavaScript读取和保存文件

少儿编程网2021-01-13 13:15:55Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介javascript栏目介绍如何用JavaScript读取和保存文件。相关免费学习推荐:javascript(视频)因为Google还不提供同步插件数据的功能,所以导入和导出插件配置就必须和文件打交道了。而出于安全原因,只有IE才提供访问文件的API;但随着HTML5的到来,其他浏览器也纷纷支持了。

JavaScript栏目介绍如何用JavaScript读取和保存文件。

k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

相关免费学习推荐:javascript(视频)k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

因为Google还不提供同步插件数据的功能,所以导入和导出插件配置就必须和文件打交道了。而出于安全原因,只有IE才提供访问文件的API;但随着HTML 5的到来,其他浏览器也纷纷支持了。k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

首先说读取文件。W3C提供了一些File API,其中**重要的是FileReader这个类。k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

先列出需要用到的HTML标签: k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 <input type="file" id="file" onchange="handleFiles(this.files)"/>

当选择了一个文件时,就会把包含这个文件的列表(一个FileList对象)作为参数传给handleFiles()函数了。k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

这个FileList对象类似一个数组,可以知道文件的数目,而它的元素就是File对象了。k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

从这个File对象可以获取name、size、lastModifiedDate和type等属性。k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

把这个File对象传给FileReader对象的读取方法,就能读取文件了。k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

FileReader共有4种读取方法:k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

readAsArrayBuffer(file):将文件读取为ArrayBuffer。k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

readAsBinaryString(file):将文件读取为二进制字符串k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

readAsDataURL(file):将文件读取为Data URLk0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

readAsText(file, [encoding]):将文件读取为文本,encoding缺省值为'UTF-8'k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

此外,abort()方法可以停止读取文件。k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

FileReader对象在读取文件后,还需要进行处理。为了不阻塞当前线程,API采用了事件模型,可以注册这些事件:k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

onabort:中断时触发k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

one rror:出错时触发k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

onl oad:文件成功读取完毕时触发k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

onl oadend:文件读取完毕时触发,无论是否失败k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

onl oadstart:文件开始读取时触发k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

onprogress:当文件读取时,周期性地触发k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

有了这些方法以后,就可以处理文件了。k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

读取文件

先来试试读取文本文件:k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

function handleFiles(files) {
    if (files.length) {
        var file = files[0];
        var reader = new FileReader();
        if (/text/w+/.test(file.type)) {
            reader.onload = function() {
                $('<pre>' + this.result + '</pre>').appendTo('body');
            }
            reader.readAsText(file);
        }
    }
}
   <span style="font-family: Arial, Helvetica, sans-serif;">这里的this.result实际上就是reader.result,也就是读取出来的文件内容。</span>

测试一下你会发现这个文件的内容被添加到网页中了。如果是用Chrome的话,必须把网页放在服务器上或插件里,file协议下会失败。k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

再来试试图片,因为浏览器可以直接显示Data URI协议的图片,所以这次就添加图片:k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

function handleFiles(files) {
    if (files.length) {
        var file = files[0];
        var reader = new FileReader();
        if (/text/w+/.test(file.type)) {
            reader.onload = function() {
                $('<pre>' + this.result + '</pre>').appendTo('body');
            }
            reader.readAsText(file);
        } else if(/image/w+/.test(file.type)) {
            reader.onload = function() {
                $('<img src="' + this.result + '"/>').appendTo('body');
            }
            reader.readAsDataURL(file);
        }
    }
}

其实input:file控件还支持选择多个文件: k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

<input type="file" id="files" multiple="" onchange="handleFiles(this.files)"/>

这样handleFiles()里就需要遍历处理files了。k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

如果只想读取部分数据的话,File对象还有webkitSlice()或mozSlice()方法,用于生成Blob对象。这个对象可以和File对象一样被FileReader读取。这2个方法接收3个参数:第1个参数是起始位置;第2个是结束位置,省略时则读到文件结尾;第3个是content type。k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

例子可以参考《Reading local files in JavaScript》。k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

当然,除了导入数据和显示文件以外,它还可以用来做AJAX上传,代码可以参考《Using files from web applications》。k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

保存文件

实际上File API: Writer提供了4个接口,但目前只有部分浏览器(Chrome 8+和Firefox 4+)实现了BlobBuilder,其余接口都不可用。 k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

对于不支持的浏览器,可以使用BlobBuilder.js和FileSaver.js来获得支持。k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

我研究了一下,发现了其中的奥秘。k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

BlobBuilder可以创建一个Blob对象。把这个Blob对象传递给URL.createObjectURL()方法,就可以拿到一个object URL。而这个object URL就是这个Blob对象的下载地址。k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

拿到下载地址后,创建一个a元素,将下载地址赋值给href属性,文件名赋值给download属性(Chrome 14+支持)。k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

然后再创建一个click事件,交给这个a元素处理,就会导致浏览器开始下载这个Blob对象了。k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

**后,用URL.revokeObjectURL()来释放这个object URL,通知浏览器可以不必继续引用这个文件了。k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

下面就是一段化简的代码:k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

var BlobBuilder = BlobBuilder || WebKitBlobBuilder || MozBlobBuilder;
var URL = URL || webkitURL || window;
function saveAs(blob, filename) {
    var type = blob.type;
    var force_saveable_type = 'application/octet-stream';
    if (type && type != force_saveable_type) { // 强制下载,而非在浏览器中打开
        var slice = blob.slice || blob.webkitSlice || blob.mozSlice;
        blob = slice.call(blob, 0, blob.size, force_saveable_type);
    }
    var url = URL.createObjectURL(blob);
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = url;
    save_link.download = filename;
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
    URL.revokeObjectURL(url);
}
var bb = new BlobBuilder;
bb.append('Hello, world!');
saveAs(bb.getBlob('text/plain;charset=utf-8'), 'hello world.txt');

测试时会提示保存一个文本文件。Chrome需要把网页放在服务器上或插件里。k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

附:写文件工具类(干货)

	/**
	 * 写文件
	 * @param fileName 文件名
	 * @param data	文件流
	 * @param path	写入路径
	 * @return boolean
	 */
	public static boolean writeFile(String fileName,String data,String path) { 
       try { 
    	   
//    	   System.out.println("fileContent:" + data);
    	   
           File file = new File(path + fileName); 
           
           if(!file.exists()){
        	   file.createNewFile();
           }
           
           FileOutputStream outStream = new FileOutputStream(file);
           outStream.write(data.getBytes());  
           outStream.flush(); 
           outStream.close(); 
           outStream = null;
           return(true);
          
       } catch (Exception e) { 
           e.printStackTrace(); 
           return(false);
       } 
	}

以上就是学会用JavaScript读取和保存文件的详细内容,更多请关注少儿编程网其它相关文章!k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

来源:php中文网k0F少儿编程网-Scratch_Python_教程_免费儿童编程学习平台


相关文章:

支持一下 ( )

学会用JavaScript读取和保存文件

      匿名评论
    • 评论
    人参与,条评论
    学会用JavaScript读取和保存文件

微信公众号

免费视频教程

先知道