用js实现预览待上传的本地图片

用js实现预览待上传的本地图片

<form name="form5" id="form5" method="post" action="#">
<input type="file" name="file5" id="file5" onchange="preview5()"/>
</form>
<script type="text/javascript">
function preview5(){
var x = document.getElementById("file5");
 if(!x || !x.value) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){ 
var y = document.getElementById("img5");
if(y){
y.src = "file://localhost/" + x.value;
}else{
var img=document.createElement("img");      img.setAttribute("src","file://localhost/"+x.value);
img.setAttribute("width","120");
img.setAttribute("height","90");
img.setAttribute("id","img5");
document.getElementById("form5").appendChild(img);
 }
}else{
alert("您选择的似乎不是图像文件。");
}}
</script> 

您可能感兴趣的文章:

• 上传图片预览JS脚本 Input file图片预览的实现示例
• JS预览图像将本地图片显示到浏览器上
• Javascript图片上传前的本地预览实例
• javascript IE7 浏览器本地图片预览
• 详解nodejs实现本地上传图片并预览功能（express4.0+）
• 原生js FileReader对象实现图片上传本地预览效果
• JS中利用FileReader实现上传图片前本地预览功能
• vue.js 实现图片本地预览 裁剪 压缩 上传功能
• JS实现的input选择图片本地预览功能示例
• 基于JavaScript实现本地图片预览
• JavaScript实现预览本地上传图片功能完整示例