1, the front-end read the implementation of the file
Key: Use the File Upload dialog box to preview local files, read files using FileReader
-
- Front-end Preview local file
-
- Upload Control Change event read file with FileReader
$ (' #select_range '). Change (function (evt) { var files = evt.target.files, reader = new FileReader (); Reader.onload = function () { var range= ' xxxxxxxxxx '; }; Reader.readastext (Files[0]);
Note: FileReader requires HTML5 support, and you can adjust the upload space to the button style by setting or adopting Filestyle
2, front-end Save file
<a href= "javascript:void (0)" id= "AA" > Save </a>
function Fake_click (obj) { var ev = document.createevent ("mouseevents"); Ev.initmouseevent ( "Click", True, false, window, 0, 0, 0, 0, 0 , False, False, False, FALSE, 0, null ); Obj.dispatchevent (EV); } name-file name; data-the string to save. function Export_raw (name, data) { var urlobject = window. URL | | Window.webkiturl | | window; var export_blob = new BLOB ([data]); var save_link = Document.createelementns ("http://www.w3.org/1999/xhtml", "a"); Save_link.href = Urlobject.createobjecturl (Export_blob); Save_link.download = name; Fake_click (Save_link); } Click the button $ (' #aa '). Click (function () { var data= "text to save"; Export_raw (' Range.json ', data); };
JS front-end method for reading and writing files (JSON, Excel)