javascript 选择路径自动显示图片

最新推荐文章于 2023-03-08 14:44:16 发布

striveman

最新推荐文章于 2023-03-08 14:44:16 发布

阅读量4.1k

点赞数 1

分类专栏：编程练习文章标签： javascript upload 扩展 class server path

本文链接：https://blog.csdn.net/striveman/article/details/2594881

版权

编程练习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

因为工作需要，自己想做个选择路径后，将图片加载到页面上。郁闷的是，书写静态的可以，当把静态的套到aspx页面上时，出现错误，郁闷。以下代码是静态页面的代码：

<html>

<head>

<title>test upload picture</title>

<script language="javascript">

		function testviewpic(mypic,imgfilepath) {

	var myflag=0;

	//进行筛选的图片的扩展名

	var aa = ".gif|.jpg|.jpeg|.bmp|.png";

	//分离出可以通过的图片扩展名

	var bb = aa.split('|');

	//进行循环判断，路经是否为图片

	for(var i=0;i<bb.length;i++)

	{

		//检索路径是否含有指定图片的扩展名

		var cc =  imgfilepath.value.toLowerCase().indexOf(bb[i]);

		if (cc > 0)

		{

			//当图片的路经中含有指定的扩展名时，对状态进行赋值

			myflag=1;			

			mypic.src=imgfilepath.value;

			mypic.style.display="";

			mypic.border=1;	

			break;

		}		

	}	

	//如果状态为错误，弹出信息框

	if(myflag == 0)

	{

		alert("current path not picture");	

		//清除上传框的路径值

		imgfilepath.outerHTML = imgfilepath.outerHTML;

		imgfilepath.value="";	

		mypic.src="";

		mypic.style.display="none";

	}

}

	</script>

</head>

<body>

		<form id="form1">

	<table>

	<tr>

					<td class="tdLeft">图片上传：</td>

					<td><INPUT id="img_upload" type="file" runat="server" οnchange="testviewpic(showimg,this.form.img_upload);">

					</td>

				</tr>

				<TR>

					<TD class="tdLeft"></TD>

					<TD><IMG id="showimg" alt="" src="" style="DISPLAY:none"></TD>

				</TR>

	</table>

</form>

</body>

</html>

striveman

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript 选择路径自动显示图片

因为工作需要，自己想做个选择路径后，将图片加载到页面上。郁闷的是，书写静态的可以，当把静态的套到aspx页面上时，出现错误，郁闷。以下代码是静态页面的代码：test upload picture function testviewpic(mypic,imgfilepath) { var myflag=0; //进行筛选的图片的扩
复制链接

扫一扫