When selecting folders in Web application development, this is troublesome for web programmers. Because of local security restrictions, JS cannot access local files, folder selection is generally avoided, when I was writing a program, I also encountered the same problem. I started to use js to traverse the file. The result was not successful and there was no way to do it, practice has proved that the best solution is to write an OCX control by yourself, so you only need to register the OCX control, and the OCX control is highly scalable, that is to say, to introduce the functions of VC/Delphi to the Web, its functions can be imagined!
I will not describe the OCX development process here. I will share the OCX control I wrote with you and hope to help some friends.
The OCX control provides a getfiles () method. You only need to obtain the control object and call the getfiles () method to obtain all the files in the corresponding path, for example:
This control can select any folder under any drive letter. In the figure, the following buttons are used to obtain the file list through the Web js method, OCX
The getfiles(), for example, 1.jpg;2.jpg;3.jpg. Use the ";" link in the middle of each file name, and use the split method in JS to separate the file.
The page code is as follows:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <title> untitled document </title> <br/> <MCE: Script Type =" text/JavaScript "> <! -- <Br/> function show () {<br/> var OBJ = document. getelementbyid ("pathocx"); <br/> var STR = obj. getfiles (); <br/> var list = Str. split (";"); <br/> for (VAR I = 0; I <list. length; I ++) {<br/> If (list [I]! = "") {<Br/> alert (list [I]); <br/>}< br/> // --> </MCE: SCRIPT> <br/> </pead> </P> <p> <body> <br/> <object <br/> id = "pathocx" <br/> classid = "CLSID: 13bf0862-063c-432f-a8df-07c2823e8133 "<br/> width = 420 <br/> Height = 300 <br/> align = center <br/> hspace = 0 <br/> vspace = 0 <br/ >>< br/> </Object> <br/> <input type = "button" name = "Submit" value = "show data" onclick = "show () "> <br/> </body> <br/> </ptml> <br/>
In this way, you can use this control to select any folder and get all the content in the folder through Js. Due to limited space, more functions of the OCX are not described here, in the next article, we will add the upload function to OCX to upload the entire folder and support resumable upload.
Note: You must register the control when using OCX.
Registration Method: Run cmd. Enter the OCX control in C:/123.ocxand run regsvr32 C:/123.ocxin cmd. A message is displayed, indicating that the registration is successful and you can use it on the webpage!
Because the csdn blog does not have the attachment upload function during editing, you can only click here to download the control.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
