自动读取文件夹中图片并显示在网页中

最新推荐文章于 2022-07-22 20:44:49 发布
最新推荐文章于 2022-07-22 20:44:49 发布
阅读量3.6k 收藏 11
点赞数 1
分类专栏： javascript 文章标签： HTML
将此网页放到有图片的文件夹下，它将自动读取你文件夹里的图片，然后通过滚动的形式显示到页面上。 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script language="Javascript"type="text/javascript">

	function loadImage()
	{

		var fso=new ActiveXObject("Scripting.FileSystemObject");

		var path=document.location;

		path=turnPath(path);

		var folder=fso.GetFolder(path);

		//alert("文件数:"+folder.Files.Count);
		var pathArray=new Array();

		var format=['jpg','JPG','gif','GIF','png','PNG','bmp','BMP','jpeg','JPEG'];

		var filesEnum=new Enumerator(folder.Files);

		for(;!filesEnum.atEnd();filesEnum.moveNext())
		{
			//document.write(filesEnum.item().Name+"<br />");
			//文件名
			var filename=filesEnum.item().Name;
			//文件后缀名
			var file_format=filename.substring(filename.lastIndexOf(".")+1,filename.length);
			for(var i=0;i<format.length;i++)
			{
				if(file_format==format[i])
				{
					pathArray.push(filename);
				}
			}
		}
		createImageTable(pathArray,path);

	}
	//过滤路径
	function turnPath(path)
	{
		var p=path+"";
		p=p.substring(8,p.lastIndexOf("/"));
		return p;
	}

	function createImageTable(ImageList,path)
	{

		//var ImageTable=document.getElementById("ImageTable");

		var table=document.createElement("table");
		var tbody=document.createElement("tbody");
		var tr=document.createElement("tr");

		for(var i=0;i<ImageList.length;i++)
		{
			var td=document.createElement("td");
			//var div=document.createElement("div");
			var img=document.createElement("img");		
			img.src=path+"\\"+ImageList[i];
			img.width=150;
			img.height=100;	
			img.style.cursor="pointer";
			img.onclick=function(){createBigImage(this.src);};//createBigImage(img.src);
			td.appendChild(img);
			tr.appendChild(td);	
		}
		tbody.appendChild(tr);
		table.appendChild(tbody);

		document.getElementById("div").appendChild(table);
	}

	function createBigImage(src)
	{
		var bigImg=document.getElementById("bigImg");
		var remark=document.getElementById("remark");
		var img=document.createElement("img");
		img.src=src;
		img=setImage_W_H(img);
		bigImg.innerHTML="";
		remark.innerHTML=src.substring(src.lastIndexOf("/")+1,src.lastIndexOf("."));
		bigImg.appendChild(img);
	}

	function setImage_W_H(img)
	{
		//alert(img.width+"  "+img.height);
		var W=600;
		var H=480;
		var scale_1=W/H;
		var width=img.width;
		var height=img.height;
		var scale_2=width/height;
		if(scale_1>scale_2)
		{
			if(H<=height)
			{
				height=H;
				width=Math.round(height*scale_2);
			}
		}
		else if(scale_1<scale_2)
		{
			if(W<=width)
			{
				width=W;
				height=Math.round(width/scale_2);
			}

		}
		else
		{
			if(W<width)
			{
				width=W;
				height=Math.round(width/scale_2);
			}
		}
		img.width=width;
		img.height=height;
		return img;
	}
	</script>
 </head>

 <body onload="loadImage();">
 <table width="100%" height="100">
 <tr>
 <td width="20">
 <div style="cursor:pointer;height:100px" onmousedown="marquee.start();document.getElementById('marquee').direction='left';" onmouseup="marquee.stop();" title="向左移">
	▊▊<br>
	▊▊<br>
	▊▊<br>
	◀▊<br>
	▊▊<br>
	▊▊<br>
	▊▊<br>
</div>
 </td>
 <td>
  <marquee id="marquee" onmouseover="this.stop();" onmouseout="this.start();" style='background:#eeeeee;padding: 0px; white-space: nowrap;border:1px solid #606080;' direction="right" scrollamount=10 height='100' width='100%'>
   <div id="div"></div>
  </marquee>
 </td>
 <td width="20">
 <div style="cursor:pointer;height:100px" onmousedown="marquee.start();document.getElementById('marquee').direction='right';" onmouseup="marquee.stop();" title="向右移">
	▊▊<br>
	▊▊<br>
	▊▊<br>
	▊▶<br>
	▊▊<br>
	▊▊<br>
	▊▊<br>
</div>
 </td>
 </tr>

 </table>
 <table width="100%" style="border:10px solid #606080;background:#eeeeee" height="100%">
	<tr align="center" height="98%">
	<td>
		<div id="bigImg" align="top"></div>
	</td>
	</tr>
	<tr align="center" height="2%">
	<td>
		<div id="remark"></div>
	</td>
 </tr>
 </table>
 </body>
</html>
iteye_13815
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浏览图片代码-查看某个文件夹中的图片，显示在网页中
07-19
查看某个文件夹中的图片，显示在网页中。程序片： package tom.jiafei; import java.io.*; class FileName implements FilenameFilter { public boolean accept(File dir,String name) { boolean boo=false; if(name.endsWith(".jpg")||name.endsWith(".JPG")) boo=true; return boo; } } public class Play { int imageNumber=0,max; String pictureName[],playImage; public Play() { File dir=new File("D:/myjsp/image"); pictureName=dir.list(new FileName()); max=pictureName.length; } public void setImageNumber(int n) { if(n<0) n=max-1; if(n==max) n=0; imageNumber=n; } public int getImageNumber() { return imageNumber; } public String getPlayImage() { playImage=new String(""); return playImage; } }
FileReader：读取本地图片文件并显示
经验在于积累而不在于年限---dreamboycx
08-22 1554
要想在页面上显示本地图片，以前我们通常的做法是将选择的图片文件上传至后端服务器，后端对其进行存储，再将图片的URL返回到前端，前端通过这个URL来显示图片。而HTML5的FileReader接口支持本地预览，FileReader接口主要是将文件读入内存，并提供相应的方法，来读取文件中的数据，当然就能显示本地图片不需上传了。目前高级浏览器实现了FileReader接口，所以像IE6这些老东西直接滚粗
php文件盒子浏览本地图片,Html读取本地文件夹下图片并显示
weixin_42436482的博客
03-13 430
一 目的在Html上选择本地文件夹，自动读取文件夹及子文件夹下的所有图片并显示在页面。技术分析：存在问题Html中file标签获取到的路径时相对的。Html中Img指定源时需要的是绝对路径。解决方法：调用Web API接口FileReader中readAsDataURL方法读取数据(这个函数参数file标签获取到的文件路径)，然后把数据加载到FileReader中(base64格式)，之后就可以用...
PHP环境网页如何随机抓取指定文件夹内的图片并显示出来
轶软工作室
10-03 1005
在服务器php环境下，随便建个目录（如photo），再把下面的代码复制做成index.php放到photo文件夹内，然后再在里面再建个images文件夹，把自己的壁纸靓照等喜欢的图片统统都放进去，就可以随机浏览展示images文件夹内的所有图片了，地址格式如www.abc.com/photo再次打开或刷新即可随即展示每张图片。 <?php header('Cache-Control:no-cache,must-revalidate');header('Pragma:no-cache');heade
java和javascript配合，实现从项目中动态读取图片（文件夹有多少图片都能读取），通过自动读取图片名，实现按钮点击播放相应的图片
qq_42978535的博客
07-22 3247
动态读取项目或者计算机文件，实现动态播放图片
Html读取本地文件夹下图片并显示的示例代码
12-13
在Html上选择本地文件夹，自动读取文件夹及子文件夹下的所有图片并显示在页面。 技术分析： 存在问题 Html中file标签获取到的路径时相对的。 Html中Img指定源时需要的是绝对路径。 解决方法： 调用Web API接口...
java实现本地读取图片存储到数据库中并在html网页显示
05-18
在本文中，我们将深入探讨如何使用Java实现在本地读取图片并将其存储到数据库中，之后再通过HTML页面显示这些图片。这个过程涉及到的主要技术包括Java编程、数据库操作（特别是MySQL）以及前后端交互。 首先，我们...
python显示文件夹图片_Python关于文件/图片上传并在html中显示
weixin_39887715的博客
11-24 149
1、settings配置STATIC_URL = '/staticfiles/'# STATIC_URL = '/static/'STATICFILES_DIRS = (os.path.join(BASE_DIR,'static'),)STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')MEDIA_URL = '/media/'MEDIA_ROOT...
根据文件夹内图片自动生成html文件
07-07
根据文件夹内图片，自动生成html文件，此html文件可以把文件夹内图片全部显示出来，而且，输入一个根目录，可以自动生成其下子目录的html文件，html与文件夹一一对应。 开放源代码，欢迎交流，里面的代码可以作为你学习c++的参考
javascript读取文件夹中的文件并输出
06-14
javascript读取文件夹中的文件并输出.
Python读取文件夹图片并显示
weixin_40506067的博客
07-07 5269
1 显示某个文件下的所有图片 import matplotlib.image as im import matplotlib.pyplot as plt %matplotlib inline #jupyter notebook需要加这一句 import os #需要读取的路径 path_name = r'E:\BreakHis_dataset\validation\12' for item in os.listdir(path=path_name): img = im.imread(os.
js遍历本地所有图片文件，显示在浏览器中
热门推荐
金石软件
08-02 1万+
var fso=new ActiveXObject("Scripting.FileSystemObject"); var curPath=location.href; curPath=curPath.substr(8,curPath.length-16); //listall("F:\\software\\新建文件夹"); listall(curPath); function
jquery实现获取本地图片并展示
过客璇璇的博客
12-04 3894
一.html页面保留按钮和隐藏的img标签 <div> 选择图片: <input type="file" id="file" name="file" capture="camera" accept="image/jpeg,image/png,image/jpeg,image/gif"> <div id="result" align="center"> ...
html按文件夹读取图片,从文件夹内容读取单个img src到HTML
weixin_30509193的博客
06-10 809
我想写一些简单的代码，但我不确定要使用什么，JavaScript或PHP。 我有一些结构化的HTML文档，我想从一个文件夹插入到每个img src属性的图像。 所以基本上我需要阅读的内容，然后插入每一个，一个接一个。从文件夹内容读取单个img src到HTML 由于任何人谁可能是能够指导我在正确的方向..我使用下面的代码从目录Header(...
从文件夹中随机读取一张图片(文件)并显示(打印)
大白爱吃菠菜
06-27 2426
记录一下常使用的代码段.这个是用于从文件夹中随机读取一张图片或者一个文件. 使用时只需要更改get_picture_dir("/home/wsb/桌面/test") 中的地址.读取文件时将图片读取和显示的代码注释掉. import cv2 import os from random import randint def get_picture_dir(file_dir): filelist...
python自动获取图片
EvilBinary的专栏
08-02 2356
#!/usr/bin/python #coding=utf-8 #post by EvilBinary 小E #Filename: get.py import urllib,urllib2,cookielib,re,os import fnmatch,sys,time,random import time import thread import threading import hashl
JS 如何动态获取本地文件夹中的所有图片
Mark
11-25 1万+
1、require.context 最近在帮师哥做一个简单的数据和图片展示的项目，其中有一个需求是要在页面上显示出该项目某一文件夹下的所有图片，图片的数目和文件名不确定，只知道图片存放的目录。 一开始想到的思路是在页面上设置输入框，输入图片的数目和文件名，但是这样不够方便，想优化一下，所以在网上看到了这个 require.context() 方法，下面先对其做一个简单的介绍。 require.context(directory, useSubdirectories, regExp) //参数： /
html自动调用文件夹里的图片,Html读取本地文件夹下图片并显示的示例代码
weixin_39729272的博客
05-31 2248
ReadImageDemovar imgPosX = 0;var imgWidth = 256;function dealSelectFiles(){/// get select files.var selectFiles = document.getElementById("selectFiles").files;for(var file of selectFiles){console.log(...
用python写一个自动获取游戏football manager头像的小程序
最新发布
09-16
### 回答1： 可以用Python来开发一个小程序，它可以自动获取Football Manager游戏中的头像。可以使用Python的网络编程库来访问Football Manager的网站，然后从网站中抓取头像图像。 ### 回答2： 使用Python编写一个自动获取游戏《足球经理》头像的小程序可以分为以下几个步骤： 1. 导入相关的模块和库，例如requests、BeautifulSoup等。 2. 用户输入想要获取头像的球员名字或球队名字，并将其存储在一个变量中。 3. 构建一个URL链接，以便能够通过网络请求获取相关信息。根据球员名字或球队名字构建不同的URL，例如球员头像的URL可能是 "https://www.footballmanager.com/players/{球员名字}"，球队头像的URL可能是 "https://www.footballmanager.com/teams/{球队名字}"。 4. 使用requests库发送GET请求，获取特定页面的HTML内容。 5. 使用BeautifulSoup库解析所得到的HTML内容，以便能够提取出想要的头像链接。可以通过查看网页的HTML结构，找到头像链接所在的标签和属性，然后使用BeautifulSoup解析并提取对应的内容。 6. 下载头像图片。使用requests库发送GET请求，得到头像的二进制数据，并将其保存到本地文件中。 7. 提示用户头像下载成功，并显示存储路径或者文件名。 总的来说，这个小程序的核心就是利用Python的请求和解析HTML页面的功能，以及保存文件的功能，通过构建特定的URL并解析页面内容，从而实现自动获取游戏《足球经理》头像的功能。 ### 回答3： 使用Python编写一个自动获取游戏Football Manager头像的小程序可以通过以下步骤实现。 首先，需要使用Python中的requests库来发送HTTP请求从网页上获取头像图片的URL。通过分析Football Manager网站上的HTML结构，找到头像图片的URL，并使用requests.get()方法获取图片内容。 接下来，可以使用Python中的Pillow库来处理图片。需要使用Pillow库的Image模块来打开并加载图片，可使用Image模块的open()方法并传入图片的URL来实现。加载后的图片可以通过Image对象的resize()方法进行缩放，以满足需要的尺寸。 然后，可以使用Image对象的save()方法将处理后的头像图片保存到本地的指定位置。可以为保存的文件指定一个命名方式，例如根据球队或球员的名称来命名，以方便后续使用。 最后，程序可以使用Python中的os库来检查保存头像图片的文件夹是否存在，如果不存在则创建一个新的文件夹。可以使用os.path.exists()方法来检查文件夹是否存在，并使用os.makedirs()方法来创建新的文件夹。 通过以上步骤，使用Python编写一个自动获取Football Manager头像的小程序即可完成。程序可以将所需头像图片的URL传递给相应的功能函数，以实现自动获取和保存头像的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值