js实现上传图片准时预览_

1、js实现上传图片准时预览_ 这篇文章主要为大家具体介绍了js实现上传图片准时预览的相关资料，具有肯定的参考价值，感爱好的伴侣可以参考一下 本文实例为大家分享了javascript图片预览功能实现的具体代码，供大家参考，具体内容如下 先为大家分享一段关于js图片预览的代码，兼容火狐和谷歌扫瞄器 /* 案例展现图片预览 */ $(function() $(#file0).bind(change,function() clickupLoad(); ); ); function clickupLoad() var imgObject = document.getElementById(file0);

2、var getImageSrc = getFullPath(imgObject); / 本地路径 var srcs = window.URL.createObjectURL(imgObject.files0); var pos = getImageSrc.lastIndexOf(.); var lastname = getImageSrc.substring(pos, getImageSrc.length) / 图片后缀 if(srcs!=) $(#yulan2).attr(src,srcs); else alert(请选择一张图片); function getFullPath(obj) /得

3、到图片的完整路径 if (obj) if (window.navigator.userAgent.indexOf(MSIE) = 1) obj.select(); return document.selection.createRange().text; else if(window.navigator.userAgent.indexOf(Firefox) = 1) if (obj.files) return window.URL.createObjectURL(obj.files0); return obj.value; return obj.value; 实例代码实现js上传图片准时预览：

4、 html head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title图片上传本地预览/title style type=text/css #previewwidth:260px;height:190px;border:1px solid #000;overflow:hidden; #imghead filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); /style script type=text/j

5、avascript /图片上传预览 IE是用了滤镜。 function previewImage(file) var MAXWIDTH = 260; var MAXHEIGHT = 180; var div = document.getElementById(preview); if (file.files file.files0) div.innerHTML =img id=imghead; var img = document.getElementById(imghead); img.onload = function() var rect = clacImgZoomParam(MAXWI

6、DTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); img.width = rect.width; img.height = rect.height; / img.style.marginLeft = rect.left+px; img.style.marginTop = rect.top+px; var reader = new FileReader(); reader.onload = function(evt)img.src = evt.target.result; reader.readAsDataURL(file.files0);

7、else /兼容IE var sFilter=filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=; file.select(); var src = document.selection.createRange().text; div.innerHTML = img id=imghead; var img = document.getElementById(imghead); img.filters.item(DXImageTransform.Microsoft.AlphaImage

8、Loader).src = src; var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); status =(rect:+rect.top+,+rect.left+,+rect.width+,+rect.height); div.innerHTML = div id=divhead style=width:+rect.width+px;height:+rect.height+px;margin-top:+rect.top+px;+sFilter+src+/div; functio

9、n clacImgZoomParam( maxWidth, maxHeight, width, height ) var param = top:0, left:0, width:width, height:height; if( widthmaxWidth | heightmaxHeight ) rateWidth = width / maxWidth; rateHeight = height / maxHeight; if( rateWidth rateHeight ) param.width = maxWidth; param.height = Math.round(height / rateWidth); else param.width = Math.round(width / rateHeight); param.height = maxHeight; param.left = Math.round(maxWidth - param.width) / 2); param.top = Math.round(maxHeight - param.height) / 2); return param; /script /head body div id=preview img id=imghead width=100 height=100 borde