javascript 实现图片预览(未上传到服务器端)
2014-09-30 12:41
656 查看
1,图片预览
越来越多的浏览器为了安全,都不能获得文件的,全路径,实现图片预览实现起来有点麻烦。有人选择复制图片到服务器的某个路径下,然后从服务器端找到路径,实现预览。但这不是最佳实现方案,如果用户一张一张的预览图片,最终服务器里的垃圾图片岂不泛滥了?
2,代码(以下代码兼容主流浏览器,请放心使用)
3,示例图
越来越多的浏览器为了安全,都不能获得文件的,全路径,实现图片预览实现起来有点麻烦。有人选择复制图片到服务器的某个路径下,然后从服务器端找到路径,实现预览。但这不是最佳实现方案,如果用户一张一张的预览图片,最终服务器里的垃圾图片岂不泛滥了?
2,代码(以下代码兼容主流浏览器,请放心使用)
<!DOCTYPE html> <html> <head> <title>图片预览</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> #main { width: 900px; height: 600px; margin: 10px auto 0; } #preview_text { width: 900px; height: 40px; } #preview_wrapper{ width: 900px; height: 500px; border: 1px solid gray; } </style> <script type="text/javascript"> var DIV_ID = "preview";// div var PREVIEW_ID = "preview_wrapper"; var PIC_WIDTH = 900;// 展示图片的宽度 var PIC_HEIGHT = 500;// 展示图片的高度 var FILE_NAME = "fileName"; var IMAGE_FILE = "imageFile"; function $$(id){// 为了方便起见,统一定义一个函数 return document.getElementById(id); } function toShowPic(){ doPreview(); setImageName(); } // 设置图片名称 function setImageName(){ var name = $$(IMAGE_FILE).value; $$(FILE_NAME).value = name.substring(name.lastIndexOf('\\')+1,name.lastIndexOf(".")); } // 预览 function doPreview(){ var sender = $$(IMAGE_FILE); var allowExtention = ".jpg,.bmp,.gif,.png";// 图片支持的格式 var extention = sender.value.substring(sender.value.lastIndexOf(".") + 1).toLowerCase();// 文件的扩展名 var browserVersion = window.navigator.userAgent.toUpperCase();// 浏览器版本 if(allowExtention.indexOf(extention)!=-1){// 包含指定的几种文件类型 if (browserVersion.indexOf("MSIE") > -1) {// IE 浏览器 if (browserVersion.indexOf("MSIE 6.0") > -1) {// ie6 $$(DIV_ID).setAttribute("src",sender.value); } else {// ie[7-8]、ie9 sender.select(); var newPreview = $$(PREVIEW_ID+ "New"); if (newPreview == null) { newPreview = document.createElement("div"); newPreview.setAttribute("id", PREVIEW_ID + "New"); newPreview.style.width = PIC_WIDTH; newPreview.style.height = PIC_HEIGHT; newPreview.style.border = "solid 1px gray"; } newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='"+ document.selection.createRange().text + "')"; var tempDivPreview = $$(PREVIEW_ID); tempDivPreview.parentNode.insertBefore(newPreview,tempDivPreview); tempDivPreview.style.display = "none"; } }else if (browserVersion.indexOf("FIREFOX") > -1) {// 火狐浏览器 var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]); if (firefoxVersion < 7) {// firefox7以下版本 $$(PREVIEW_ID).setAttribute("src",sender.files[0].getAsDataURL()); } else {//firefox7.0+ $$(DIV_ID).setAttribute("src",window.URL.createObjectURL(sender.files[0])); } }else if (sender.files) { //兼容chrome、火狐等,HTML5获取路径 if (typeof FileReader != "undefined") { var reader = new FileReader(); reader.onload = function(e) { $$(DIV_ID).setAttribute("src", e.target.result); $$(DIV_ID).setAttribute("width", PIC_WIDTH); $$(DIV_ID).setAttribute("height", PIC_HEIGHT); }; reader.readAsDataURL(sender.files[0]); } else if (browserVersion.indexOf("SAFARI") > -1) { alert("暂时不支持Safari浏览器!"); } }else { $$(PREVIEW_ID).setAttribute("src",sender.value); } }else{ sender.value = ""; // 清空选中文件 $$(FILE_NAME).value=""; alert("仅支持以"+allowExtention+"为后缀的文件!"); if (browserVersion.indexOf("MSIE") > -1) {// IE浏览器 sender.select(); document.selection.clear(); } sender.outerHTML = sender.outerHTML; } } </script> </head> <body> <div id="main"> <div id="preview_text" class="preview_text"> 选择文件 : <input type="file" name="imageFile" id="imageFile" onChange="toShowPic()"/> 文件名 : <input type="text" name="fileName" id="fileName" value=""/> </div> <div id="preview_wrapper"> <img id="preview" src="image/blank.gif" /><br/><!-- 图片占位符 --> </div> </div> </body> </html>
3,示例图
相关文章推荐
- javascript 实现图片预览(未上传到服务器端)
- javascript 实现图片预览(未上传到服务器端)
- javascript 实现图片预览(未上传到服务器端)
- 纯javascript实现图片上传前预览,判断图片大小
- jquery javascript 实现上传图片及图片大小验证、图片预览效果代码
- javascript实现上传图片前的预览效果
- javascript和HTML5上传图片之前实现预览效果
- JavaScript实现本地图片上传前进行裁剪预览
- JavaScript实现图片上传预览及进度条
- javascript和HTML5上传图片之前实现预览效果
- JavaScript实现图片上传预览
- 实现上传图片之后显示预览javaScript代码
- JavaScript实现简单的前端上传图片预览
- javascript实现上传图片并预览的效果代码实例
- Javascript实现上传前对图片大小、格式的检查并预览
- JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)
- JavaScript实现图片上传预览功能
- javascript实现input file上传图片预览效果
- javascript实现图片上传预览(转)
- javascript实现图片上传以及预览(包含相关知识点汇总)