Posted in Javascript onAugust 07, 2013
<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('重置上传控件'); } }
图片上传判断及预览脚本的效果实例
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@