html代码
<input type="file" name="file" id="file" onchange="ajaxFileUpload(this)"/> <img id="loginImg" src="" />
javascript代码
由于高级浏览器对上传图片路径进行了加密,图片在页面不能正常显示,在这里我们可以将图片转换成base64格式的路径就可以了。
function ajaxFileUpload(obj){ var path,clip = $("#loginImg"),FileReader = window.FileReader; if (FileReader) {//chrome var reader = new FileReader(), file = obj.files[0]; reader.onload = function(e) { var str=e.target.result; var str1=str.split(";"); var str2=str1[0].split("/"); clip.attr("src", e.target.result); clip.attr("data-type", str2[1]); //获取图片的格式 if (limitImg('loginImg', 999, false, 1920, 1080) == ""||limitImg('loginImg', 999, false, 1920, 1080)==undefined) { alert(limitImg('imgId',999,false,1920,1080)) } else { alert(limitImg('imgId', 999, false, 1920, 1080)) } }; reader.readAsDataURL(file); } else { path = $(this).val(); if (/"\w\W"/.test(path)) { path = path.slice(1,-1); } clip.attr("src",path); } }
function limitImg() { var img = document.getElementById(arguments[0]); //显示图片的对象 var maxSize = arguments[1]; //图片的大小 var allowGIF = arguments[2] || false; var maxWidth = arguments[3] || 0; var maxHeight = arguments[4] || 0; var postfix = img.getAttribute("data-type"); var str = "jpeg";
if (str.indexOf(postfix.toLowerCase()) == -1) { if (allowGIF) { return "图片格式不对,只能上传jpg或gif图像"; } else { return "图片格式不对,只能上传jpg图像"; } } if (img.fileSize > maxSize * 1024) { return "图片大小超过限制,请限制在" + maxSize + "K以内"; } if (img.fileSize == -1) { return "图片格式错误,可能是已经损坏或者更改扩展名导致,请重新选择一张图片"; } else { if (maxWidth > 0) { if (img.width > maxWidth) { return "图片宽度超过限制,请保持在" + maxWidth + "像素内"; } if (img.height > maxHeight) { return "图片高度超过限制,请保持在" + maxHeight + "像素内"; }
//万恶的需求,还没见过这么上传图片的呢 if(img.width%4 != 0){ return "图片宽度必须为4的整数倍"; } if(img.height%4 != 0){ return "图片高度必须为4的整数倍"; } }else{ return "" } } }