Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use h5+js to achieve local file reading and writing, I hope you will learn something after reading this article, let's discuss it together!

The code is as follows:

Read local files

Document

/ / Click the Import button to make files trigger the click event, and then finish reading the file.

$("# fileImport") .click (function () {

("# files") .click ()

}) functionfileImport () {/ / get the File object that reads my file

VarselectedFile=document.getElementById ('files') .files [0]; varname=selectedFile.name;// reads the file name of the selected file

Varsize=selectedFile.size;// reads the size of the selected file

Console.log ("file name:" + name+ "size:" + size); varreader=newFileReader (); / / this is the core, and the read operation is done by it.

/ / reader.readAsText (selectedFile); / / read the contents of the file, or read the URL of the file

Reader.onload=function () {/ / callback this function when the reading is completed, and then the contents of the file are stored in result for direct operation.

Console.log (this.result)

}

}

Write to a file

There is also a FileWriter,FileReader corresponding to FileReader in HTML5 that can be supported by Chrome, FF, and Safari. More than a certain version is required. But FileWriter seems to be supported only by Chrome.

The code is as follows:

/ / first import a Js file / / HTML and add an export element / / JS file $("# export) .click (function () {)

Varcontent= "this is exported directly using HTML5"

Varblob=newBlob ([content], {type: "text/plain;charset=utf-8"})

SaveAs (blob, "file.txt"); / / saveAs (blob,filename)

})

Read the local file path code

There are some problems in obtaining the file path. Due to security reasons, the new version of the browser does not support direct access to local URL. Some methods have been found on the Internet, as follows:

Document

/ / method of obtaining file path by FX

FunctionreadFileFirefox (fileBrowser) {try {

Netscape.security.PrivilegeManager.enablePrivilege ("UniversalXPConnect")

} catch (e) {

Alert ('cannot access the local file because of browser security settings. To overcome this, follow these steps: (1) enter "about:config" in the address bar; (2) right-click and select New- > Boolean; (3) enter "signed.applets.codebase_principal_support" (without quotation marks) as the name of a new preference; (4) click OK and try to reload the file'); return

} the full path of the client can be obtained by varfileName=fileBrowser.value;//. Whether the judgment below is too complex, and the following to get ie is also very complicated.

Varfile=Components.classes ["@ mozilla.org/file/local;1"]

.createInstance (Components.interfaces.nsILocalFile); try {/ / Backslashesforwindows

File.initWithPath (fileName.replace (/ g, "\\"))

} catch (e) {if (e.ResultResultComponents.results.NSysterrowFILEED unRECOGNIZEDPATH) throwe

Alert ("File'" + fileName+ "'cannotbeloaded:relativepathsarenotallowed.Pleaseprovideanabsolutepathtothisfile."); return

} if (file.exists ()) = = false) {

Alert ("File'" + fileName+ "'notfound."); return

} returnfile.path

} / / get the path according to different browsers

Functiongetvl (obj) {/ / judge browser

VarSys= {}; varua=navigator.userAgent.toLowerCase (); vars

(s=ua.match (/ msie ([\ d.] +) /)? Sys.ie=s [1]:

(s=ua.match (/ firefox\ / ([\ d.] +) /)? Sys.firefox=s [1]:

(s=ua.match (/ chrome\ / ([\ d.] +) /)? Sys.chrome=s [1]:

(s=ua.match (/ opera. ([\ d.] +) /)? Sys.opera=s [1]:

(s=ua.match (/ version\ / ([\ d.] +). * safari/))? Sys.safari=s [1]: 0 if (Sys.ie= "7. 0") {/ / ie7,ie8

Obj.select ()

File_url=document.selection.createRange () text

} elseif (Sys.firefox) {/ / fx

/ / file_url=document.getElementById ("file") .files [0] .getAsDataURL (); / / the path obtained is an encrypted string recognized by FF

File_url=readFileFirefox (obj)

} elseif (Sys.chrome) {

File_url=obj.value

} / / alert (file_url)

Document.getElementById ("text") [xss_clean] = "the full path to get the file domain is:" + file_url

} the method of obtaining the full path of the file domain by JS, which is compatible with different browsers

The above code is used normally in IE678. Under IE9, document.selection.createRange () denies access, which seems to have improved security.

Finally, the test found that under IE9, if the file control gets focus, document.selection.createRange () denies access.

Therefore, you just need to add an obj.blur () after obj.select ().

Elseif (Sys.ie > = "7.0") {/ / ie7,ie8

Obj.select ()

Obj.blur ()

File_url=document.selection.createRange () text

}

/ / obj=document.getElementById ("file")

After reading this article, I believe you have some understanding of "how to use h5+js to read and write local files". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.