直接上代碼，這個也是從幾個地方扣過來的。
<!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>