Home > Developer > JavaScript
there may be times in your application where you need to get content from the user library in order to perform related actions. If you want to get the content in a user library, you need to get to the user library first, get the user library can be implemented by the corresponding properties of the KnownFolders class in the Windows.storage namespace, the available properties include documentslibrary (document library), Musiclibrary (music library) and videoslibrary (Video library). Once you get to the user library, you can use the Getitemsasync, Getfilesasync, or getfoldersasync functions in the KnownFolders class to get the contents of the library. Wherethe Getitemsasync function can get the files and folders in the library, thegetfilesasync function only gets the files in the library, and Getfoldersasync The function only obtains the folder in the library, in the actual development can choose the suitable function according to the need to implement the corresponding function. Here's an example of getting the files and folders in the picture library to show how to get the content in the user library.
Create a blank application project for a JavaScript Windows store and name it getfilesandfoldersapplication. Open the Default.html file, add a H2 element, a text area, and a button in the BODY element, where the H2 element is used to display the page title "Get File and Folder List Example", which is used to get the contents of the picture library, and the text area is used to display what gets. The corresponding HTML snippet is as follows:
<body>
get file and Folder List examples
<textarea id= "Textareaid" rows= "5" cols= "5" > the content in the picture library includes: </textarea>
<br/>
<button id= "ButtonID" > get content from a picture library </button>
</body>
In the preceding code, for the purpose of designing CSS styles and retrieving controls, the class name and ID are set for the control when it is added. Where the class property value for the H2 element is set to ArticleTitle, and the ID property values for the set text area and the get content from Picture Library button are Textareaid and ButtonID, respectively.
Next, add the following code in the Default.css file to control the layout of the Default.html page.
/* Set H2 The text font size of the element and where it appears in the application interface */
. articletitle {
Font-size:x-large;
margin:20px 15px 10px 87px;
}
/* Set textarea The display position of the control in the interface */
#textareaID {
margin:20px 15px 10px 90px;
}
/* Set " get content from a picture library " where the button appears in the interface */
#ButtonID {
margin:20px 15px 10px 150px;
}
After the layout of the foreground interface is completed, the application interface effect is shown in 19-17.
Figure 19-17 Foreground interface
After you've laid out the foreground interface, here's how to get the content from the picture library. Open a. default.js file in "Args.setpromise (WinJS.UI.processAll ());" Statement , add the following code to register the click event handler for the Get content in Picture Library button.
document.getElementById ("ButtonID"). AddEventListener ("click", Getfilesandfolders);
The getElementById function of the document object is called with the "ButtonID" parameter in the code to find the element object with the id attribute value ButtonID. and use the AddEventListener function to register the event handler function Getfilesandfolders for the Click event of the Element object . let's look at the implementation code for the event handler function getfilesandfolders .
The getfilesandfolders function is used to handle the click event of the Get content from Picture Library button to get a list of files and folders from the picture library. The code of the function is added in the default.js file "app.onactivated = function (args) {...};" statement, the corresponding JavaScript snippet is as follows:
function Getfilesandfolders () {
// get to Picture library first
var folderobject = Windows.Storage.KnownFolders.picturesLibrary;
// and then call Getitemsasync function to get the contents of a picture library, including files and subfolders
Folderobject.getitemsasync (). Then (function (items) {
var textareaobject = document.getElementById ("Textareaid");
// displays the retrieved files and folders in the text area
Items.foreach (function (item) {
if (Item.isoftype (Windows.Storage.StorageItemTypes.folder)) {
// if the current item is a folder, the name of the folder is displayed in the text area
Textareaobject.innertext + = "\ r \ n" + " folder: "+ item.name;
}
else if (Item.isoftype (Windows.Storage.StorageItemTypes.file)) {
// if the current item is a file, the name of the file is displayed in the text area
Textareaobject.innertext + = "\ r \ n" + " File: "+ item.name;
}
});
});
}
The above code first obtains the folder object representing the picture library through the Pictureslibrary property of the Windows.Storage.KnownFolders class, assigns a value to the variable folderobject, and then invokes the Getit of the folder object through the Folderobject variable. The Emsasync function gets the contents of the picture library, and after the Getitemsasync function call is complete, an anonymous function is defined to display the retrieved file and folder names in the text area. In this anonymous function, the getElementById function of the document object is called with "Textareaid" to find the element object with an id attribute value of Textareaid and assigns a value to the variable Textareaobject The foreach function that invokes the parameter items then loops through each data item in the Items collection, and then determines the type of the object through the Isoftype function of the item object, and if the item object is a folder, the string "folder:" and the name of the folder appears in the text area, if the item object is a file, the string "File:" and the file name are displayed in the text area.
start Debugging, click the Get content in Picture Library button to get the contents of the picture library, including files and folders, and the names of these files and folders appear in the text area, as shown in effect 19-18.
Figure 19-18 Effect of successful acquisition of content in a picture library
WIN10 series: JavaScript gets a list of files and folders
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
