上传图片预览
<script type="text/javascript"> function previewImage(file) { var WIDTH = 80; var HEIGHT = 80; var div = document.getElementById('preview'); if (file.files && file.files[0]) { div.innerHTML = '<img id=HeadImages>'; var img = document.getElementById('HeadImages'); img.onload = function () { var rect = clacImgZoomParam(WIDTH, HEIGHT, 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.files[0]); } } </script> <form name="form5" id="form5" method="post" action="#"> <input type="file" name="file5" id="file5" onchange="previewImage(this)"/> <div id="preview"></div> </form>
判断img
//上传图片 function previewImage(file, imgid) { var img = document.getElementById(imgid); var reg = /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/; var fileName = file.value; if (fileName.lastIndexOf(".") == -1) { Showbo.Msg.alert("上传的图片只能是jpg、gif、bmp、png、jpeg类型!"); $("#upimgts").html("未选择图片"); return false; } else { var fileType = (fileName.substring(fileName.lastIndexOf("."), fileName.length)).toLowerCase(); if (!reg.test(fileType)) { Showbo.Msg.alert("上传的图片只能是jpg、gif、bmp、png、jpeg类型!"); $("#upimgts").html("未选择图片"); return false; } else { $("#upimgts").html(fileName); var reader = new FileReader(); reader.onload = function (evt) { img.src = evt.target.result; } reader.readAsDataURL(file.files[0]); } } }