The javascript section introduces how to read and save files with JavaScript.
Related free learning recommendations: javascript (video)
Because Google does not yet provide the function of synchronizing plug-in data, it is necessary to deal with files to import and export plug-in configuration. For security reasons, only IE provides an API to access files; but with the advent of HTML 5, other browsers have also supported it.
Let's talk about reading files first. W3C provides some File APIs, the most important of which is the FileReader class.
First list the HTML tags that need to be used:
No files selected
When a file is selected, 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, and the file can be read.
FileReader has 4 reading methods:
readAsArrayBuffer(file): Read the file as an ArrayBuffer.
readAsBinaryString(file): read the file as a binary string
readAsDataURL(file): Read the file as Data URL
readAsText(file, [encoding]): read the file as text, the default encoding is'UTF-8'
In addition, the abort() method can stop reading the file.
After the FileReader object reads the file, it needs to be processed. In order not to block the current thread, the API uses an event model to register these events:
onabort: triggered when interrupted
onerror: triggered when an error occurs
onload: triggered when the file is successfully read
onloadend: Triggered when the file is read, whether it fails or not
onloadstart: triggered when the file starts to be read
onprogress: Trigger periodically when the file is read
With these methods, you can process files.
Reading the file
Let's try to read the 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() {
$('
' + this.result + '
').appendTo('body');
}
reader.readAsText(file);
}
}
}
This.result here is actually reader.result, which is the content of the file read.
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 plug-in, and it will fail under the file protocol.
Let's try the picture again, because the browser can directly display the picture of the Data URI protocol, so 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() {
$('
' + this.result + '
').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 selecting multiple files:
No files selected
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 a webkitSlice() or mozSlice() method to generate a Blob object. This object can be read by FileReader like File object. These 2 methods receive 3 parameters: the first parameter is the starting position; the second is the ending position, if omitted, it will read to the end of the file; the third 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. The code can refer to "Using files from web applications".
Saving files
In fact, File API: Writer provides 4 interfaces, but currently only some browsers (Chrome 8+ and Firefox 4+) implement BlobBuilder, and other interfaces are not available.
For unsupported browsers, you can use BlobBuilder.js and FileSaver.js to get support.
I researched it and discovered the mystery.
BlobBuilder can create a Blob object. Pass this Blob object to the URL.createObjectURL() method, and you can 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+ support).
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, which informs the browser that there is no need to continue referencing this file.
Here 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 = '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');
When testing, you will be prompted to save a text file. Chrome needs to place web pages on the server or in the plug-in.
Attachment: Document writing tools (dry goods)
/**
* 写文件
* @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);
}
}
This article comes from php Chinese website: javascript column https://www.php.cn/course/list/17.html