使用JavaScript从给定目录中获取图片

前端之家收集整理的这篇文章主要介绍了使用JavaScript从给定目录中获取图片前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在使用JavaScript开发Windows 8应用程序.我需要获取给定目录中的所有图片(每张图片的路径).我该怎么做?

我有以下内容

  1. (function () {
  2. "use strict";
  3. var page = WinJS.UI.Pages.define("/html/scenario3.html",{
  4. ready: function (element,options) {
  5. document.getElementById("folder").addEventListener("click",pickFolder,false);
  6. }
  7. });
  8. function pickFolder() {
  9. // Clean scenario output
  10. WinJS.log && WinJS.log("","sample","status");
  11. // Verify that we are currently not snapped,or that we can
  12. // unsnap to open the picker
  13. var currentState = Windows.UI.ViewManagement.ApplicationView.value;
  14. if (currentState === Windows.UI.ViewManagement.ApplicationViewState.snapped && !Windows.UI.ViewManagement.ApplicationView.tryUnsnap()) {
  15. // Fail silently if we can't unsnap
  16. return;
  17. }
  18. // Create the picker object and set options
  19. var folderPicker = new Windows.Storage.Pickers.FolderPicker;
  20. folderPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.desktop;
  21. // Users expect to have a filtered view of their folders depending on the scenario.
  22. // For example,when choosing a documents folder,restrict the filetypes to documents for your application.
  23. folderPicker.fileTypeFilter.replaceAll(["*"]);
  24. //folderPicker.fileTypeFilter.replaceAll([".png",".jpg",".jpeg"]);
  25. folderPicker.pickSingleFolderAsync().then(function (folder) {
  26. if (folder) {
  27. // Application now has read/write access to all contents in the picked folder (including sub-folder contents)
  28. // Cache folder so the contents can be accessed at a later time
  29. Windows.Storage.AccessCache.StorageApplicationPermissions.futureAccessList.addOrReplace("PickedFolderToken",folder);
  30. var pictures = Windows.Storage.KnownFolders.folder;
  31. pictures.getFilesAsync().done(function (images) {
  32. console.log(images.length + " images found.");
  33. WinJS.log && WinJS.log("Total Images: " + images.length,"status");
  34. });
  35. } else {
  36. // The picker was dismissed with no selected file
  37. WinJS.log && WinJS.log("Operation cancelled.","status");
  38. }
  39. });
  40. }
  41. })();

如果我使用上面的代码,它会出现以下错误

无法获取未定义或空引用的属性“getFilesAsync”

最佳答案
如果需要从图片库加载图片,首先需要检查项目的package.appxmanifest文件内的Capabilities选项卡中是否启用了此功能.

启用后,您可以使用以下内容引用此库:

  1. // 'pictures' is a reference to our Pictures Library
  2. var pictures = Windows.Storage.KnownFolders.picturesLibrary;

Microsoft决定任何超过50毫秒的操作都需要异步,因此要从这个库中获取图像,我们必须使用以下异步方法,并在解析promise时处理结果:

  1. // Get a list of files ('images') within our Pictures Library
  2. pictures.getFilesAsync().done(function( images ) {
  3. console.log( images.length + " images found." );
  4. });

从这里你可以迭代找到的图像,并根据你的喜好处理它们.

有关更多信息,请查看Window.Storage命名空间.

此外,您可能会发现File access sample也很有帮助.

更新

从您更新的代码我可以看到您允许用户选择他们选择的文件夹.有了这个,您需要设置fileTypeFiltering,然后在pickSingleFolderAsync promise解析后拉出图像:

  1. // Prompt user to select a folder
  2. var picker = Windows.Storage.Pickers.FolderPicker();
  3. // Which file types will we be showing?
  4. picker.fileTypeFilter.append(".jpg");
  5. // Grab the selected folder,reference as 'folder'
  6. picker.pickSingleFolderAsync().then(function (folder) {
  7. // Get files within selected folder as 'files'
  8. folder.getFilesAsync().then(function (files) {
  9. // Output number of files found
  10. console.log(files.length + " files found.");
  11. });
  12. });

猜你在找的JavaScript相关文章