直接上代码，这个也是从几个地方扣过来的。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .shade { position: absolute; display: none; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.55); } .shade div { width: 300px; height: 200px; line-height: 200px; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -150px; background: white; border-radius: 5px; text-align: center; } .a-upload { position: fixed; padding: 25px 15px; height: 20px; line-height: 20px; font-size: 50px; position: relative; cursor: pointer; color: #888; background: #fafafa; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; display: inline-block; *display: inline; *zoom: 1 } .a-upload input { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; filter: alpha(opacity=0); cursor: pointer } .a-upload:hover { color: #444; background: #eee; border-color: #ccc; text-decoration: none } .img_div{min-height: 100px; min-width: 100px;} .isImg{width: 200px; height: 200px; position: relative; float: left; margin-left: 10px;} .removeBtn{position: absolute; top: 0; right: 0; z-index: 11; border: 0px; border-radius: 50px; background: red; width: 22px; height: 22px; color: white;} .shadeImg{position: absolute; display: none; width: 100%; height: 100%; top: 0; left: 0; z-index: 15; text-align: center; background: rgba(0, 0, 0, 0.55);} .showImg{width: 400px; height: 500px; margin-top: 140px;} </style> <script type="text/javascript"> $(function() { var objUrl; var img_html; $("#myFile").change(function() { var img_div = $(".img_div"); var filepath = $("input[name='myFile']").val(); for(var i = 0; i < this.files.length; i++) { objUrl = getObjectURL(this.files[i]); var extStart = filepath.lastIndexOf("."); var ext = filepath.substring(extStart, filepath.length).toUpperCase(); /* 鉴定每个图片上传尾椎限制 * */ if(ext != ".BMP" && ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") { $(".shade").fadeIn(500); $(".text_span").text("图片限于bmp,png,gif,jpeg,jpg格式"); this.value = ""; $(".img_div").html(""); return false; } else { /* 若规则全部通过则在此提交url到后台数据库 * */ img_html = "<div class='isImg'><img src='" + objUrl + "' onclick='javascript:lookBigImg(this)' style='height: 100%; width: 100%;' /><button class='removeBtn' onclick='javascript:removeImg(this)'>x</button></div>"; img_div.append(img_html); } } /* 鉴定每个图片大小总和 * */ var file_size = 0; var all_size = 0; for(j = 0; j < this.files.length; j++) { file_size = this.files[j].size; all_size = all_size + this.files[j].size; var size = all_size / 1024; if(size > 5000) { $(".shade").fadeIn(500); $(".text_span").text("上传的图片大小不能超过1000k！"); this.value = ""; $(".img_div").html(""); return false; } } /* 鉴定每个图片宽高 暂时隐藏掉 如果需要使用可以取消注释就行 * */ // var img = new Image(); // img.src = objUrl; // img.onload = function() { // if (img.width > 100 && img.height > 100) { // alert("图片宽高不能大于一百"); // $("#myFile").val(""); // $(".img_div").html(""); // return false; // } // } return true; }); /* 鉴定每个浏览器上传图片url 目前没有合并到Ie * */ function getObjectURL(file) { var url = null; if(window.createObjectURL != undefined) { // basic url = window.createObjectURL(file); } else if(window.URL != undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file); } else if(window.webkitURL != undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file); } //console.log(url); return url; } }); /* 上传图片附带删除 再次地方可以加上一个ajax进行提交到后台进行删除 * */ function removeImg(r){ $(r).parent().remove(); } /* 上传图片附带放大查看处理 * */ function lookBigImg(b){ $(".shadeImg").fadeIn(500); $(".showImg").attr("src",$(b).attr("src")) } /* 关闭弹出层 * */ function closeShade(){ $(".shade").fadeOut(500); } /* 关闭弹出层 * */ function closeShadeImg(){ $(".shadeImg").fadeOut(500); } </script> <title></title> </head> <body> <a href="javascript:;" class="a-upload"> <input type="file" name="myFile" id="myFile" multiple="multiple" />+ </a> <div class="img_div"> </div> <div class="shade" onclick="javascript:closeShade()"> <div class=""> <span class="text_span"> </span> </div> </div> <div class="shadeImg" onclick="javascript:closeShadeImg()"> <div class=""> <img class="showImg" src=""> </div> </div> </body> </html>