JavaScript Advanced (6) Reading and Saving Files with JavaScript

黄舟

Release： 2018-05-15 17:27:40

Original

16287 people have browsed it

Reading and saving files with JavaScript

Because Google does not yet provide the function of synchronizing plug-in data, 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)"/>

Copy after login

When a file is selected, it will The list containing the file (a FileList object) is passed as a parameter to the handleFiles() 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); } } }

Copy after login

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

Copy after login

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); } } }

Copy after login

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

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

Copy after login

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.

Finally, use URL.revokeObjectURL() to release the object URL and notify the browser that it no longer needs to reference this file.

The following is a simplified code:

var BlobBuilder = BlobBuilder || WebKitBlobBuilder || MozBlobBuilder;
var URL = URL || webkitURL || window;
function saveAs(blob, filename) {
    var type = blob.type;
    var force_saveable_type = &#39;application/octet-stream&#39;;
    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(&#39;http://www.w3.org/1999/xhtml&#39;, &#39;a&#39;);
    save_link.href = url;
    save_link.download = filename;
    var event = document.createEvent(&#39;MouseEvents&#39;);
    event.initMouseEvent(&#39;click&#39;, 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(&#39;Hello, world!&#39;);
saveAs(bb.getBlob(&#39;text/plain;charset=utf-8&#39;), &#39;hello world.txt&#39;);

Copy after login

When testing, you will be prompted to save a text file. Chrome needs to put the web page on the server or in a plug-in.

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

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

Copy after login

美文美图

以上就是JavaScript进阶(六)用JavaScript读取和保存文件的内容，更多相关内容请关注PHP中文网（www.php.cn）！