Learn to read and save files with JavaScript

The

javascript column introduces how to read and save files using JavaScript.

Related free learning recommendations: javascript (video)

Because Google does not yet provide synchronized plug-in data function, so importing and exporting plug-in configurations must deal with files. For security reasons, only IE provides APIs for accessing files; but with the arrival of HTML 5, other browsers have also supported it.

First let’s read the file. W3C provides some File APIs, the most important of which is the FileReader class.

First list the HTML tags that need to be used:

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

When a file is selected, the list containing the file (a FileList object) will be passed to handleFiles() as a parameter function.

This FileList object is similar to an array, you can know the number of files, and its elements are File objects.

From this File object, attributes such as name, size, lastModifiedDate and type can be obtained.

Pass this File object to the reading method of the FileReader object to read the file.

FileReader has 4 reading methods:

readAsArrayBuffer(file): Read the file as ArrayBuffer.

readAsBinaryString(file): Read the file as a binary string

readAsDataURL(file): Read the file as a Data URL

readAsText(file, [encoding] ): Read the file as text, the default encoding value is 'UTF-8'

In addition, the abort() method can stop reading the file.

The FileReader object still needs to be processed after reading the file. In order not to block the current thread, the API adopts an event model, and you can register these events:

onabort: triggered when interrupted

onerror: triggered when an error occurs

onload: file read successfully Triggered when fetching is completed

onloadend: Triggered when the file is read, regardless of failure

onloadstart: Triggered when the file starts to be read

onprogress: When the file is read, Trigger periodically

With these methods in place, you can process files.

Read file

Let’s try reading a text file first:

function handleFiles(files) {
    if (files.length) {
        var file = files[0];
        var reader = new FileReader();
        if (/text/w+/.test(file.type)) {
            reader.onload = function() {
                $(&#39;<pre class="brush:php;toolbar:false">&#39; + this.result + &#39;

').appendTo('body');             }             reader.readAsText(file);         }     } }

   <span style="font-family: Arial, Helvetica, sans-serif;">这里的this.result实际上就是reader.result，也就是读取出来的文件内容。</span>

Test it and you will find that the content of this file is added to the web page. If you are using Chrome, you must put the web page on the server or in a plug-in. The file protocol will fail.

Let’s try the picture again, because the browser can directly display the picture of the Data URI protocol, so I will add the picture this time:

function handleFiles(files) {
    if (files.length) {
        var file = files[0];
        var reader = new FileReader();
        if (/text/w+/.test(file.type)) {
            reader.onload = function() {
                $(&#39;<pre class="brush:php;toolbar:false">&#39; + this.result + &#39;

').appendTo('body');             }             reader.readAsText(file);         } else if(/image/w+/.test(file.type)) {             reader.onload = function() {                 $('').appendTo('body');             }             reader.readAsDataURL(file);         }     } }

In fact, the input:file control also supports the selection of multiple files:

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

In this way, handleFiles() needs to traverse and process files.

If you only want to read part of the data, the File object also has webkitSlice() or mozSlice() methods for generating Blob objects. This object can be read by FileReader in the same way as the File object. These two methods receive 3 parameters: the first parameter is the starting position; the second parameter is the end position, if omitted, it will read to the end of the file; the third parameter is the content type.

For examples, please refer to "Reading local files in JavaScript".

Of course, in addition to importing data and displaying files, it can also be used for AJAX upload. For code, please refer to "Using files from web applications".

Save File

Actually File API: Writer provides 4 interfaces, but currently only some browsers (Chrome 8 and Firefox 4) implement BlobBuilder, and the other interfaces are not available.

For unsupported browsers, you can use BlobBuilder.js and FileSaver.js to gain support.

I researched it and discovered the secret.

BlobBuilder can create a Blob object. Pass this Blob object to the URL.createObjectURL() method to get an object URL. And this object URL is the download address of this Blob object.

After getting the download address, create an a element, assign the download address to the href attribute, and assign the file name to the download attribute (Chrome 14 supports).

Then create a click event and hand it over to the a element for processing, which will cause the browser to start downloading the Blob object.

      最后，用URL.revokeObjectURL()来释放这个object URL，通知浏览器可以不必继续引用这个文件了。

下面就是一段化简的代码：

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需要把网页放在服务器上或插件里。

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

	/**
	 * 写文件
	 * @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);
       } 
	}

The above is the detailed content of Learn to read and save files with JavaScript. For more information, please follow other related articles on the PHP Chinese website!