同时兼容IE和FF的图片上传判断及预览脚本
来源:互联网 发布:黑马p2p网络借贷平台 编辑:程序博客网 时间:2024/05/16 03:33
<div id="imgbox"> <img id="imghead" src="img/no_photo.gif" alt="" width="100" height="125" /> </div><asp:FileUpload ID="FileUploadImg" runat="server" onchange='previewImage(this);' style="position:relative;left:-130px;cursor:pointer;"/>
var $$ = function(id) { return "string" == typeof id ? document.getElementById(id) : id;};/*图片验证*///验证上传图片格式function checkupload(ele) { var obj = $$("FileUploadImg"); var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用:) if (fileContentType == 'gif' || fileContentType == 'jpeg' || fileContentType == 'png' || fileContentType == 'jpg') { //验证上传图片大小 return checkFileSize(ele); } else { alert('上传文件格式不正确!'); return false; } return false;}//验证上传图片大小function checkFileSize(ele) { var maxSize = 100 * 1024; //ie if (window.navigator.userAgent.indexOf("MSIE") >= 1) { var fso; try { fso = new ActiveXObject('Scripting.FileSystemObject'); var file = fso.GetFile(ele.value); //alert(file.Size); return file.Size < maxSize; } catch (e) { alert("浏览器设置禁用ActiveXObject控件,请启用"); return false; } } //firefox else if (window.navigator.userAgent.indexOf("Firefox") >= 1) { //alert(ele.files[0].fileSize); return ele.files[0].fileSize < maxSize; } return false;}//加载预览图片function previewImage(ele) { if (ele && checkupload(ele)) { var imgDiv = $$("imgbox"); imgDiv.innerHTML = ""; imgDiv.style.width = "100px"; imgDiv.style.height = "125px"; //ie if (window.navigator.userAgent.indexOf("MSIE") >= 1) { imgDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)"; imgDiv.filters("DXImageTransform.Microsoft.AlphaImageLoader").src = ele.value; } //firefox else if (window.navigator.userAgent.indexOf("Firefox") >= 1) { imgDiv.innerHTML = "<img width='" + 100 + "' height='" + 125 + "' id='aPic' src='" + ele.files.item(0).getAsDataURL() + "'>"; } else { imgDiv.innerHTML = "<span style='color:red;'>IE/火狐浏览器才支持图片预览</span>"; } } else { $$("FileUploadImg").value = ""; $$("imgbox").innerHTML = "<img id='imghead' src='img/no_photo.gif' alt='' width='100' height='125' />"; //alert('重置上传控件'); }}