js 图片上传预览
2010-11-15 17:42
225 查看
BODY {margin:0;padding:0;}
.SYN_ROW {background:silver;}
.SYN_TXT {border-left:1px solid;position:relative;left:4.5em;background:white;font-family:monospace;margin-right:4.5em;}
.SYN_LNB {position:absolute;left:0;}
.SYN_LNN {padding:0;color:black;border:0;text-align:right;width:3.5em;height:1em;font-family:monospace;background:transparent;cursor:default;font-size:100%;}
.SYN_BCV {padding:0;color:black;border:0;text-align:center;width:.75em;height:.75em;font-family:monospace;background:white;cursor:default;line-height:.75em;position:relative;left:.25em;font-size:100%;}
.SYN_BCH {display:none;}
.SYN_END {width:4.5em;border-top:1px solid black;}
/*-------------
HTML
-------------*/
.HTML_TXT {color:#000000;} /* Text */
.HTML_TAG {color:#0000ff;} /* Tag */
.HTML_ELM {color:#800000;} /* Tag/element name */
.HTML_ATR {color:#ff0000;} /* Attribute name */
.HTML_VAL {color:#0000ff;} /* Attribute value */
.HTML_CHA {color:#ff0000;} /* Character reference */
.HTML_COM {color:#008000;} /* Comment */
.HTML_NON {color:#000000;font-style:italic;} /* Non-HTML text */
/*-------------
css
-------------*/
.CSS_TXT {color:#000000;} /* Text */
.CSS_SEL {color:#800000;} /* Selector */
.CSS_PRO {color:#ff0000;} /* Property name */
.CSS_VAL {color:#0000ff;} /* Property value */
.CSS_COM {color:#008000;} /* Comment */
.HTML_TXT .CSS_TXT {background:#f0f0f0;} /* For embedded CSS */
/*-------------
Javascript
-------------*/
.JS_TXT {color:#000000;} /* Text */
.JS_KEY {color:#0000ff;} /* Keyword */
.JS_STR {color:#800000;} /* String */
.JS_NUM {color:#ff0000;} /* Number */
.JS_COM {color:#008000;} /* Comment */
.HTML_TXT .JS_TXT {background:#f0f0f0;} /* For embedded JS */
.SYN_ROW {background:silver;}
.SYN_TXT {border-left:1px solid;position:relative;left:4.5em;background:white;font-family:monospace;margin-right:4.5em;}
.SYN_LNB {position:absolute;left:0;}
.SYN_LNN {padding:0;color:black;border:0;text-align:right;width:3.5em;height:1em;font-family:monospace;background:transparent;cursor:default;font-size:100%;}
.SYN_BCV {padding:0;color:black;border:0;text-align:center;width:.75em;height:.75em;font-family:monospace;background:white;cursor:default;line-height:.75em;position:relative;left:.25em;font-size:100%;}
.SYN_BCH {display:none;}
.SYN_END {width:4.5em;border-top:1px solid black;}
/*-------------
HTML
-------------*/
.HTML_TXT {color:#000000;} /* Text */
.HTML_TAG {color:#0000ff;} /* Tag */
.HTML_ELM {color:#800000;} /* Tag/element name */
.HTML_ATR {color:#ff0000;} /* Attribute name */
.HTML_VAL {color:#0000ff;} /* Attribute value */
.HTML_CHA {color:#ff0000;} /* Character reference */
.HTML_COM {color:#008000;} /* Comment */
.HTML_NON {color:#000000;font-style:italic;} /* Non-HTML text */
/*-------------
css
-------------*/
.CSS_TXT {color:#000000;} /* Text */
.CSS_SEL {color:#800000;} /* Selector */
.CSS_PRO {color:#ff0000;} /* Property name */
.CSS_VAL {color:#0000ff;} /* Property value */
.CSS_COM {color:#008000;} /* Comment */
.HTML_TXT .CSS_TXT {background:#f0f0f0;} /* For embedded CSS */
/*-------------
Javascript
-------------*/
.JS_TXT {color:#000000;} /* Text */
.JS_KEY {color:#0000ff;} /* Keyword */
.JS_STR {color:#800000;} /* String */
.JS_NUM {color:#ff0000;} /* Number */
.JS_COM {color:#008000;} /* Comment */
.HTML_TXT .JS_TXT {background:#f0f0f0;} /* For embedded JS */
<!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> <title>图片预览</title></head><body> <!-- <form id="form1" enctype="multipart/form-data">--> <table width="100%" cellpadding="6" cellspacing="1" id="tabImg"> <tr> <td> <div class="preview_wrapper"> <div class="preview"> <img class="idImg" alt="" onload="ImagePreview.loadImg.call(ImagePreview,this)" /> </div> </div><br/> <input type="file" id="idFile" onchange="ImagePreview.init.call(ImagePreview,this)" /> </td> <td> <input type="button" onclick="ImagePreview.AddTr()" value="新增"/> </td> </tr> </table> <script language="javascript" type="text/javascript"> /****************************************************************** create Datetime:2010/10/07 version: v1.0 create Author:wuchaorang main Function:实现图片文件上传的预览与文件类型的判断 appliance range:ie6,ie7,ie8,firefox bug:无法在chrome浏览器上预览,remote的功能实现出现了一些问题尚未解决 *******************************************************************/ var ImagePreview = { fileObject: null, //file对象 imgObject: null, //预览img对象 divObject: null, //div对象 tabObj: "tabImg", fileType: 1, //1:图片 2:flash 3:图片与flash 4:其它类型 options: { maxWidth: 300, maxHeight: 300 }, //预览图片允许的大小 browerVesion: navigator.userAgent.toLowerCase(), //浏览器类型 Trim: function (val) {//去空格 return val.replace(/(^/s*)|(/s*$)/g, ""); }, fileformat: function () {//文件上传格式的的判断 if (this.fileObject == null) return false; if (this.fileObject.value == "") { return false; } var str = this.fileObject.value; var Temp = str.lastIndexOf("."); if (Temp == -1) { return false; } var TempFile = str.substring(Temp + 1, str.length); if (TempFile != "gif" && TempFile != "jpg" && TempFile != "GIF" && TempFile != "JPG" && TempFile != "bmp" && TempFile != "BMP" && TempFile != "JPEG" && TempFile != "jpeg" && TempFile != "png" && TempFile != "PNG") { alert("图片文件格式错误，请重新确认！"); return false; } }, getObject: function (obj) { return document.getElementById(obj); }, Mode: function () {//图片预览模式 var nav = this.browerVesion; if (nav.indexOf("msie 7") != -1 || nav.indexOf("msie 8") != -1) return "filter"; else if (nav.indexOf("firefox") != -1) return "domfile"; else if (nav.indexOf("msie 6") != -1) return "simple"; else return "remote"; //这种模式的功能预览尚未完成 }, getMode: function () {//获取不同预览模式的数据源 switch (this.Mode()) { case "filter": return this.filterMode(); case "domfile": return this.domfileMode(); case "simple": return this.simpleMode(); case "remote": break; } }, filterMode: function () {//ie 7与ie 8的图片预览 this.fileObject.select(); //this.file.select(); try { return document.selection.createRange().text; } finally { document.selection.empty(); } }, domfileMode: function () {//firefox图片预览 return this.fileObject.files[0].getAsDataURL(); }, remoteMode: function () {//chrome opera浏览器 }, simpleMode: function () {//ie 6 return this.fileObject.value; }, previewImg: function () {//预览 var obj = this.getMode(); var brower = this.browerVesion; if (brower.indexOf("msie") != -1) { this.divObject.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = obj; //針對ie7與ie8而設置的 var helpimg = this.imgObject; helpimg.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = obj; this.autoSizePreview(this.divObject, this.options.maxWidth, this.options.maxHeight, helpimg.offsetWidth, helpimg.offsetHeight); //helpimg.style.display = "none"; } else if (brower.indexOf("firefox") != -1) { var s = this.imgObject; s.style.display = "block"; s.style.width = "auto"; s.style.height = "auto"; s.src = obj; } else { return; } }, autoSizePreview: function (objPre, maxWidth, maxHeight, width, height) {//预览的图片等比缩放 var param = { width: width, height: height, top: 0, left: 0 }; if (width > maxWidth || height > maxHeight) { rateWidth = width / maxWidth; rateHeight = height / maxHeight; if (rateWidth > rateHeight) { param.width = maxWidth; param.height = height / rateWidth; } else { param.width = width / rateHeight; param.height = maxHeight; } } param.left = (maxWidth - param.width) / 2; param.top = (maxHeight - param.height) / 2; objPre.style.width = param.width + 'px'; objPre.style.height = param.height + 'px'; objPre.style.marginTop = param.top + 'px'; objPre.style.marginLeft = param.left + 'px'; }, ImgTransparent: function () { var nav = this.browerVesion; if (nav.indexOf("msie 6") != -1 || nav.indexOf("msie 7") != -1) { return "mhtml:" + document.scripts[document.scripts.length - 1].getAttribute("src", 4) + "!blankImage"; //默认图片设置 } else return "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="; }, loadImg: function (sender) { this.autoSizePreview(sender, this.options.maxWidth, this.options.maxHeight, sender.offsetWidth, sender.offsetHeight); }, init: function (obj) {//file的onchange事件 this.fileObject = obj; //file对象 var parentObj = obj.parentNode; //td对象 var imgObj = parentObj.getElementsByTagName("img")[0]; //预览的img对象 this.imgObject = imgObj; this.divObject = imgObj.parentNode; if (this.fileformat() == false) return false; //文件格式判断 this.previewImg(); }, AddTr: function () { var obj = document.getElementById(this.tabObj); var clonetd = obj.rows[0].cells[0].cloneNode(true); var newRow = obj.insertRow(); var cell0 = newRow.insertCell(0); var cell1 = newRow.insertCell(1); cell0.innerHTML = clonetd.innerHTML; cell1.innerHTML = "0"; }, defalutLoad: function () {//默认加载 if (this.fileType != 1) return; this.styleLoad(); var obj = document.getElementById(this.tabObj); var clonetd = obj.rows[0].cells[0]; clonetd.getElementsByTagName("img")[0].src = this.ImgTransparent(); }, styleLoad: function () { var nav = this.browerVesion; var isIE = (/msie/.test(nav)) && !(/opera/.test(nav)) && (/win/.test(nav)); var css = document.createElement("style"); css.setAttribute("type", "text/css"); css.setAttribute("media", "screen"); var htmlContent = ""; htmlContent += ".preview_wrapper{width:" + this.options.maxWidth + "px;height:" + this.options.maxHeight + "px; background-color: #CCC;display: inline-block;position:relative;}"; htmlContent += " .preview{filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);}"; htmlContent += " .idImg{filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);position:absolute;width:" + this.options.maxWidth + "px;height:" + this.options.maxHeight + "px;}"; var obj = document.getElementsByTagName("head")[0]; if (!isIE) {//firefox样式设置 var style = document.createTextNode(htmlContent); css.appendChild(style); obj.appendChild(css); } if (isIE && document.styleSheets && document.styleSheets.length > 0) {//ie样式设置 var last_style_node = document.styleSheets[document.styleSheets.length - 1]; if (typeof (last_style_node.addRule) == "object") { last_style_node.addRule(".preview_wrapper", "width:" + this.options.maxWidth + "px;height:" + this.options.maxHeight + "px; background-color: #CCC;display: inline-block;position:relative;"); last_style_node.addRule(".preview", "filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);"); last_style_node.addRule(".idImg", "visibility: hidden;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);position:absolute;width:" + this.options.maxWidth + "px;height:" + this.options.maxHeight + "px;"); } } else { var sheet = document.createStyleSheet(); sheet.addRule(".preview_wrapper", "width:" + this.options.maxWidth + "px;height:" + this.options.maxHeight + "px; background-color: #CCC;display: inline-block;position:relative;"); sheet.addRule(".preview", "filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);"); sheet.addRule(".idImg", "visibility: hidden;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);position:absolute;width:" + this.options.maxWidth + "px;height:" + this.options.maxHeight + "px;"); } }, imgEventLoad: function () { var img = new Image(); this.img = img; img.onreadystatechange = function () { } } }; ImagePreview.defalutLoad(); </script> <!-- </form>--></body></html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js上传图片预览实现
- js 本地图片未上传先预览(等比缩小图片内容大小)
- JS上传图片且在线预览，修改浏览器兼容性问题
- JS实现图片上传前预览
- js 图片的上传前预览上传的图片（兼容所有浏览器）
- js上传图片预览
- js上传图片前进行预览
- js实现上传图片及时预览
- php+js实现图片的上传、裁剪、预览、提交示例
- 适用于各浏览器支持图片预览，无刷新异步上传js插件
- 用js实现预览待上传的本地图片
- Js-上传图片时，产生预览
- js图片上传预览功能兼容实现
- js 上传图片预览（Chrome IE ,Firefox,Opera）
- js实现上传图片及时预览
- js-上传图片预览
- 图片上传之前检查大小、尺寸、格式并预览的js代码
- 文件上传js插件，附带图片预览与验证功能，未完待续，请大神不啬指正，指教。
- js图片上传预览功能
- js实现前端图片上传即时预览功能