15.20 上传图片时预览.htm

来自「一些javascript的小例子希望对初学者有更好的帮助」· HTM 代码 · 共 28 行

HTM

28 行

<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>

15.20 上传图片时预览.htm - 源码说明

本页面展示了「一些javascript的小例子希望对初学者有更好的帮助」中的 15.20 上传图片时预览.htm 源码文件，采用 HTM 编程语言编写，共 28 行代码。您可以在线阅读完整代码内容，也可以返回资源详情页下载完整源码包进行本地学习和开发。

虫虫下载站收录了大量与javascript相关的技术资源，包括源代码、技术文档、电路图等，是电子工程师和嵌入式开发者的专业学习平台。

⌨️ 快捷键说明

复制代码Ctrl + C

搜索代码Ctrl + F

全屏模式F11

增大字号Ctrl + =

减小字号Ctrl + -

显示快捷键?