JS 遍历本地文件夹图片并打开

最新推荐文章于 2022-11-15 19:45:25 发布

GISMagic

最新推荐文章于 2022-11-15 19:45:25 发布

阅读量2.2k

点赞数 1

分类专栏： JavaScript 图片遍历

本文链接：https://blog.csdn.net/Tonque/article/details/114095110

版权

JavaScript 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

图片遍历

1 篇文章 0 订阅

订阅专栏

今天不画流程图，图片展示用的现成的jquery的viewer.js，读取本地文件用的是IE浏览器的ActiveX控件，所以只能在IE上运行喽，记得开服务。
大概思路就是，新出一个图片就为它新建一个< li >的容器
话不多说上代码
Html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="A jQuery plugin wrapper for Viewer.js.">
  <meta name="author" content="Chen Fengyuan">
  <title>遍历图片加载</title>
  <link rel="stylesheet" href="dist/bootstrap.min.css" crossorigin="anonymous">
  <link rel="stylesheet" href="dist/viewer.css" crossorigin="anonymous">
  <link rel="stylesheet" href="dist/main.css">
</head>
<body>
    <table >
        <tr>
        <td id = "textarea">
        
        </td>
        </tr>
        </table>
  <div class="container">
    <div class="row">
        <div class="docs-galley mb-3">
          <ul id="imgTab" class="docs-pictures clearfix">
          </ul>
        </div>
    </div>
  </div>

  <!-- Scripts -->
  <script src="dist/search.js"></script>
  <script src="dist/jquery.js" crossorigin="anonymous"></script>
  <script src="dist/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
  <script src="dist/viewer.js" crossorigin="anonymous"></script>
  <script src="dist/jquery-viewer.min.js"></script>
  <script src="dist/main.js"></script>
</body>
</html>

var value =
  "E:/demo/img/images";
var fso = new ActiveXObject("Scripting.FileSystemObject");
var f = fso.GetFolder(value);
var fc = new Enumerator(f.files);
var s = "";
var a = new Array();
var ul = document.getElementById("imgTab");
// for (; !fc.atEnd(); fc.moveNext())
//     {

//         s += fc.item();
//         s += "<br/>";
//         a.push(fc.item());
//     }
//     fk = new Enumerator(f.SubFolders);
//     for (; !fk.atEnd(); fk.moveNext())
//     {
//     s += fk.item();
//     s += "<br/>";
//     }

//     textarea.innerHTML = a.length;
//     console.log(a.path)
for (; !fc.atEnd(); fc.moveNext()) {
  a.push(fc.item());
}
for (let i = 0; i < a.length; i++) {
  var address = a[i];
  var newLi = document.createElement("li");
  var address2=address.path;
  console.log(address2);
//   var name = address2
  address2=address2.replace("/","//");
  var address3 = "<img data-original="+address2+ " src="+address2+" alt=></img>";
  newLi.innerHTML=address3;
    ul.appendChild(newLi);
}

textarea.innerHTML =typeof( a[1]);

// console.log(a.path);