图片上传简单JS预览
2011-11-25 15:08
246 查看
最近又在做关于图片上传的功能,图片上传自然要要能够及时预览图片,在网上找了很多资料,不得不说,网上的资料确实蛮多的,垃圾也比较多,很多方案都是烂的没话说,不过最后还是找到一个比较简单、简洁的方案,所以特地贴上来更大家分享:
首先简单介绍一下这个功能,这是可以兼容IE火狐等主流浏览器的图片上传及时预览图片的功能,就是用客户端脚本javascript实现的,而且还做了类型判断,比如只允许上传jpg、gif、png(等格式)的文件,具体的自己去定义,很简单的,还以一点就是如果选择的类型与我们定义的允许上传的文件的类型不匹配时,系统会提醒用户该文件不能上传,而且会自动清空上传控件的值(具体的看了代码就知道了,很简单的),有兴趣的不妨试试
以下是源代码:
View Code
如果copy下来的代码有问题,建议下载源代码,点击这里下载
首先简单介绍一下这个功能,这是可以兼容IE火狐等主流浏览器的图片上传及时预览图片的功能,就是用客户端脚本javascript实现的,而且还做了类型判断,比如只允许上传jpg、gif、png(等格式)的文件,具体的自己去定义,很简单的,还以一点就是如果选择的类型与我们定义的允许上传的文件的类型不匹配时,系统会提醒用户该文件不能上传,而且会自动清空上传控件的值(具体的看了代码就知道了,很简单的),有兴趣的不妨试试
以下是源代码:
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>兼容IE火狐等主流浏览器,图片上传简单JS预览(选择非指定类型文件还可以自动清空上传控件的值)</title> <script> function checkPic(){ var picPath=document.getElementById("picPath").value; var type=picPath.substring(picPath.lastIndexOf(".")+1,picPath.length).toLowerCase(); if(type!="jpg"&&type!="bmp"&&type!="gif"&&type!="png"){ resetFile();//清空file控件内容 alert("请上传正确的图片格式"); returnfalse; } document.getElementById("Preview").style.display="block"; returntrue; } //图片预览 function PreviewImage(divImage,upload,width,height) { if(checkPic()){ try{ var imgPath; //图片路径 var Browser_Agent=navigator.userAgent; //判断浏览器的类型 if(Browser_Agent.indexOf("Firefox")!=-1){ //火狐浏览器 imgPath = upload.files[0].getAsDataURL(); document.getElementById(divImage).innerHTML ="<img id='imgPreview' src='"+imgPath+"' width='"+width+"' height='"+height+"'/>"; }else{ //IE浏览器 var Preview = document.getElementById(divImage); Preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = upload.value; Preview.style.width = width; Preview.style.height = height; } }catch(e){ resetFile();//清空file控件内容 alert("请上传正确的图片格式"); } } } /*以下代码主要用来当用户选择了非指定类型图片时清空上传控件的值*/ var html=document.getElementById("resetFile").innerHTML; function resetFile(){ document.getElementById("Preview").style.display="none";//隐藏显示选中图片的层 document.getElementById("resetFile").innerHTML=html; //清空file控件 } </script> </head> <body> <table cellpadding="0" cellspacing="0" width="100%"> <tr> <td> 选择图片: </td> <td id="resetFile"> <input type="file" id="picPath" name="pic_path" onchange="PreviewImage('Preview',this,100,90);" style="width: 265px"/> <input type="submit" value=" 保 存 "/> <font color="red">只允许上传 jpg | gif | png 格式图片</font> </td> </tr> <tr> <td> 图片预览: </td> <td style="text-align: left;"> <div id="Preview" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);"> </div> </td> </tr> </table> </body>
如果copy下来的代码有问题,建议下载源代码,点击这里下载
相关文章推荐
- 【转】图片上传简单JS预览,兼容IE火狐等主流浏览器
- 简单实现JS上传图片预览功能
- 简单实现JS上传图片预览功能
- JS简单实现多图片预览上传
- js获取file控件的完整路径(上传图片预览)
- Asp.net图片上传实现预览效果的简单代码
- js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小
- JS实现图片上传本地预览
- JS上传图片前实现图片预览效果的方法
- 图片上传预览js
- JS 上传图片先预览
- js实现图片上传前预览效果
- js上传图片预览的实现方法
- 上传图片,多图上传,预览功能,js原生无依赖
- js 图片上传预览
- JS上传图片本地实时预览缩略图
- js上传图片预览
- js 图片上传并预览
- js实现文件上传,图片本地预览(部分代码是借鉴的)
- 上传图片预览JS脚本 Input file图片预览的实现示例