html 代码 <html> <head> <meta charset="utf-8" /> <title>图片上传预览/删除/放大</title> <style type="text/css"> .img-cont { width: 1000px; height: 570px; border: 2px solid #317ef3; margin: 50px auto; } .img-cont>div { width: 300px; height: 260px; border: 1px solid #777; float: left; margin: 20px 0 0 20px; } .img-cont>div>div { width: 300px; height: 220px; border: 1px solid red; } .img-cont>div>a { width: 60px; height: 30px; border-radius: 4px; line-height: 30px; text-align: center; color: #fff; display: block; background: #317ef3; margin: 5px 0 0 0px; cursor: pointer; } #bigimg { position: fixed; top: 50%; left: 50%; border: 1px solid red; width: 300px; height: 300px; display: none; } </style> </head> <body> <center> <!-- 图片选择框 --> <form> <input type="file" onchange='PreviewImage(this)' /> </form> <!-- 图片展示容器 --> <div class="img-cont"></div> <!--图片放大显示--> <div id="bigimg"> </div> </center> <!-- js --> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> //////定义上传方法函数 var id = "1"; function PreviewImage(imgFile) { //console.log(imgFile.value) var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/; if(!pattern.test(imgFile.value)) { alert("系统仅支持jpg/jpeg/png/gif/bmp格式的照片!"); imgFile.focus(); } else { //定义图片路径 var path; //添加显示图片的HTML元素 id += 1; $(".img-cont").append("<div><div id='" + id + "'></div><a class='delete-btn'>删除</a></div>"); //判断浏览器类型 if(document.all) { //兼容IE imgFile.select(); path = document.selection.createRange().text; document.getElementById(id).innerHTML = ""; document.getElementById(id).style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")"; //使用滤镜效果 } else { //兼容其他浏览器 path = URL.createObjectURL(imgFile.files[0]); console.log(imgFile.files[0]); document.getElementById(id).innerHTML = "<img src='" + path + "' width='300' height='220' />"; } //重置表单 resetForm(imgFile); } } //重置表单,允许用户连续添加相同的图片 function resetForm(imgFile) { $(imgFile).parent()[0].reset(); } //删除图片 //控制"按钮"显示与隐藏 $(".img-cont").off("mouseenter", "div").on("mouseenter", "div", function() { var that = this; var dom = $(that).children("a"); dom.removeClass("hide"); //为点击事件解绑,防止重复执行 dom.off("click"); dom.on("click", function() { //删除当前图片 dom.parent().remove(); }); //放大图片 var imgdom = $(that).children("img"); imgdom.off("click"); imgdom.on("click", function() { //删除当前图片 $("#bigimg").html(" ") $("#bigimg").show(); var imgclone = imgdom.clone(); $("#bigimg").append(imgclone); }); $("#bigimg").click(function() { $(this).hide(); }) }) </script> </body> </html>
评论 (0 )
最新评论
暂无评论
赶紧努力消灭 0 回复