js 动态添加图片

最新推荐文章于 2023-02-20 09:07:09 发布

最新推荐文章于 2023-02-20 09:07:09 发布 · 478 阅读

文章标签：

#javascript #ViewUI

本文介绍了一种使用 JScript 在网页上实现文件输入后实时预览图片的方法。通过定义一个函数 PreviewImg，当用户选择一个图片文件时，该函数会将所选文件显示为预览图。此功能适用于需要上传头像或图片的应用场景。

JScript code

<!--
function PreviewImg(imgFile) {

var newPreview = document.getElementById( " newPreview " );
// var imgDiv = document.createElement("div");
// document.body.appendChild(imgDiv);
newPreview.style.width = " 100px " ; newPreview.style.height = " 115px " ;
newPreview.style.filter = " progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale) " ;
newPreview.filters.item( " DXImageTransform.Microsoft.AlphaImageLoader " ).src = imgFile.value;
// newPreview.appendChild(imgDiv);

}

HTML code

< input name ="file1" type ="file" id ="file1"
onchange ="PreviewImg(this);"
size ="30" onkeydown ="javascript:if(event.keyCode==13) WebForm.Submit.focus();" >