📄 15.20 上传图片时预览.htm

📁 一些javascript的小例子希望对初学者有更好的帮助

💻 HTM

字号:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>标题页</title>
</head>
<body>
<form name="form1" id="form1" method="post" action="#">
<input type="file" name="file1" id="file1" onchange="preview()"/>
</form>
<script type="text/javascript">
function preview()
{ 
var x = document.getElementById("file1");       //获取上传控件
if(!x || !x.value) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;            //使用正则判断用户选择的文件类型
if(patn.test(x.value)){ 
var y = document.getElementById("img1");        //获取图像控件
if(y){ y.src = 'file://localhost/' + x.value; } //获取图像源
else{ var img=document.createElement('img');    //创建图像文件，并设置图像的高度、宽度和id
img.setAttribute('src','file://localhost/'+x.value); 
img.setAttribute('width','120'); 
img.setAttribute('height','90'); 
img.setAttribute('id','img1'); 
document.getElementById('form1').appendChild(img); } }
else{ alert("您选择的不是图像文件。"); }}
</script>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C

搜索代码 Ctrl + F

全屏模式 F11

切换主题 Ctrl + Shift + D

显示快捷键 ?

增大字号 Ctrl + =

减小字号 Ctrl + -