能否实现一个本地网页读取指定本地文件夹中所有图片并显示

时间:2022-04-01 04:24:48
我想做一个网页(仅在本机使用),能够显示当前文件夹中的所有jpg图片。因为当前文件夹中图片数量可能比较大,所以不希望直接挨个图片添加<img src="***.jpg"/>,请大家指点下下。

我想,纯html语言肯定无法实现吧:
那嵌入什么样的代码可以实现本地文件夹中文件名的读取,并循环调用<img src="***.jpg"/>来显示???

求指点...

5 个解决方案

#1


ActiveXObject
找操作文件的对象,读取文件路径转换成相对路径,然后遍历下面的文件。

#2


引用 1 楼 konghulu 的回复:
ActiveXObject
找操作文件的对象,读取文件路径转换成相对路径,然后遍历下面的文件。


ActiveXObject是什么脚本语言的东东呢?
能给段代码不?

#3


flash,silverlight,除此之外可能没有什么省事的方法

#4


有多少图片,如果挨个读还挺好办,在js里处理一下就行,不挨个读确实不知道怎么弄
求KongHuLu详细指点

#5


还是我自己解决吧

<script type="text/javascript">
/* **********************************************************************
 * @函数名称:PGGGetFileListByPathAndSuffix
 * @函数功能:遍历指定目录下的指定类型文件
 * @传入参数:folderPath 目录路径,字符串类型
 * @   suffixes 文件后缀字符串列表,以竖线分隔,如:*.jpg|*.gif
 * @返 回 值:文件路径数组
 * @使用说明:该函数只返回指定类型文件,不嵌套返回其中子目录中文件
 * @创建日期:2011-08-22
 * **********************************************************************/ 
function PGGGetFileListByPathAndSuffix(folderPath, suffixes) 

var  retFilesArray  =  new  Array(); 
var  fso  =  new ActiveXObject("Scripting.FileSystemObject"); 
var  Folder  =  fso.GetFolder(folderPath); 
// var  subFolders  =  Folder.SubFolders; 
var  Files  =  Folder.Files; 

var arrSuffix = suffixes.split("|");

var  enmFiles  =  new  Enumerator(Files); 
for(; !enmFiles.atEnd(); enmFiles.moveNext()) 
{
var tmpPath = enmFiles.item().Path;
for (x in arrSuffix)
{
if (fso.GetExtensionName(tmpPath) == arrSuffix[x].substr(2))
{
retFilesArray[retFilesArray.length]  =  tmpPath;
break;
}
}


return  retFilesArray; 
}
</script>

<script type="text/javascript"> 
// 获取当前目录
// location.href形如:file:///C:/.../.../filename.html
var FolderPath = location.href.substring(location.href.lastIndexOf(':') - 1, location.href.lastIndexOf('/'));
var arrFiles   =  PGGGetFileListByPathAndSuffix(FolderPath, "*.jpg|*.png|*.bmp|*.gif");
if (arrFiles.length == 0)
{
alert("There isn't any pictures in directionary: \n" + FolderPath + ".");
}
for (x in arrFiles)
{
document.write("<a href=" + arrFiles[x] +" ><img src=" + arrFiles[x] + " alt=Failed! width=240 height=180 /></a>");
}
document.close();
</script>

#1


ActiveXObject
找操作文件的对象,读取文件路径转换成相对路径,然后遍历下面的文件。

#2


引用 1 楼 konghulu 的回复:
ActiveXObject
找操作文件的对象,读取文件路径转换成相对路径,然后遍历下面的文件。


ActiveXObject是什么脚本语言的东东呢?
能给段代码不?

#3


flash,silverlight,除此之外可能没有什么省事的方法

#4


有多少图片,如果挨个读还挺好办,在js里处理一下就行,不挨个读确实不知道怎么弄
求KongHuLu详细指点

#5


还是我自己解决吧

<script type="text/javascript">
/* **********************************************************************
 * @函数名称:PGGGetFileListByPathAndSuffix
 * @函数功能:遍历指定目录下的指定类型文件
 * @传入参数:folderPath 目录路径,字符串类型
 * @   suffixes 文件后缀字符串列表,以竖线分隔,如:*.jpg|*.gif
 * @返 回 值:文件路径数组
 * @使用说明:该函数只返回指定类型文件,不嵌套返回其中子目录中文件
 * @创建日期:2011-08-22
 * **********************************************************************/ 
function PGGGetFileListByPathAndSuffix(folderPath, suffixes) 

var  retFilesArray  =  new  Array(); 
var  fso  =  new ActiveXObject("Scripting.FileSystemObject"); 
var  Folder  =  fso.GetFolder(folderPath); 
// var  subFolders  =  Folder.SubFolders; 
var  Files  =  Folder.Files; 

var arrSuffix = suffixes.split("|");

var  enmFiles  =  new  Enumerator(Files); 
for(; !enmFiles.atEnd(); enmFiles.moveNext()) 
{
var tmpPath = enmFiles.item().Path;
for (x in arrSuffix)
{
if (fso.GetExtensionName(tmpPath) == arrSuffix[x].substr(2))
{
retFilesArray[retFilesArray.length]  =  tmpPath;
break;
}
}


return  retFilesArray; 
}
</script>

<script type="text/javascript"> 
// 获取当前目录
// location.href形如:file:///C:/.../.../filename.html
var FolderPath = location.href.substring(location.href.lastIndexOf(':') - 1, location.href.lastIndexOf('/'));
var arrFiles   =  PGGGetFileListByPathAndSuffix(FolderPath, "*.jpg|*.png|*.bmp|*.gif");
if (arrFiles.length == 0)
{
alert("There isn't any pictures in directionary: \n" + FolderPath + ".");
}
for (x in arrFiles)
{
document.write("<a href=" + arrFiles[x] +" ><img src=" + arrFiles[x] + " alt=Failed! width=240 height=180 /></a>");
}
document.close();
</script>