使用JQ載入圖片,實現上傳前先瀏覽.支援IE8+,火狐,Chrome,不支援Safari
阿新 • • 發佈:2019-02-11
一同事在圖片這一塊遇到了不少相容性問題,我結合網路上的資料寫了一個預覽功能,支援多圖片載入,支援自定義圖片格式,支援圖片檢測,支援錯誤取消.
話不多說,直接上傳程式碼.
imgpreview.js 檔案如下.
/*! ImgPreView v0.0.3 ck 圖片本地瀏覽,支援ie8+, 不支援safari,請直接設定監聽imgPreView.onImgFileChange */ (function(w){ var imgPreView = { //需求的寬高 canWidth : 1024, canHeight : 768, //檢查寬高 checkSize : false, //允許載入多張圖片,不支援IE loadMultImg : true, //上傳的檔案ID fileId : "", //要顯示的圖片所在位置的父ID,如果允許useDefaultImg設定為false,表示要顯示的圖片的id. imgsId : "", //圖片顯示的ID編號,預設從0開始遞增 imgId : "imgView", //預設顯示 defaultShow : true, //使用預設圖片,意思就是說img元素已經在body裡進行了建立,不需要重新再建立新的img標籤.只在單個顯示中有效. useDefaultImg : false, //圖片的顯示風格,可以自定義修改.. imgStyle : "<img src='' />", // 檢查瀏覽器版本 checkExpoler : function(value) { var explorer = navigator.userAgent; return explorer.indexOf(value) >= 0; }, //檔案改變監聽 onImgFileChange : function() { var ipv = imgPreView; var imgSrc = $(this)[0].value; //safari不支援 if(ipv.checkExpoler("Safari") && !ipv.checkExpoler("Chrome")) { alert("該外掛不支援safari瀏覽器.請使用mac版的Chrome瀏覽器") return; } if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) { imgSrc = ""; ipv.clearFileField(); ipv.clearImageField(); return false; } //如果不使用預設的圖片,那麼每次載入的時候都需要清空imgs域 if(!ipv.useDefaultImg) { $("#imgs").empty(); } //IE走這個. if (ipv.checkExpoler('MSIE')) { ipv.loadSingleImage(imgSrc); }else{ //其餘走這個 var files = $(this)[0].files; //允許載入多張圖片並且不適用預設img元素. if(ipv.loadMultImg && !ipv.useDefaultImg) { ipv.loadMultImage(files); } else { ipv.loadSingleImage(files); } } }, //載入單個圖片,為IE時obj是URL,為其他時是files loadSingleImage : function(obj) { var ipv = imgPreView; var tImgId = "#" + ipv.imgId + 0; var url = ""; if(ipv.checkExpoler('MSIE')) { url = obj; }else { var file = obj[0]; url = ipv.getImageUrl(file); } //使用預設的圖片. if(!ipv.useDefaultImg) { ipv.createImage(ipv.imgsId, ipv.imgId + 0); $(tImgId).bind("load", ipv.imgloaded); $(tImgId).attr("src", url); } else { $("#"+ipv.imgsId).attr("src", url); $("#"+ipv.imgsId).unbind("load", ipv.imgloaded); $("#"+ipv.imgsId).bind("load", ipv.imgloaded); } }, // 載入多圖片,不會再IE上面使用. loadMultImage : function(files) { var ipv = imgPreView; var tImgId = "#" + ipv.imgId; for(var i = 0; i < files.length; i++) { var file = files[i]; var url = ipv.getImageUrl(file); ipv.createImage(ipv.imgsId, ipv.imgId + i); $(tImgId + i).load(ipv.imgloaded); $(tImgId + i).attr("src", url); } }, //獲取圖片的url地址. getImageUrl : function(file) { var url = null ; // 下面函式執行的效果是一樣的,只是需要針對不同的瀏覽器執行不同的 js 函式而已 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) ; } return url ; }, //建立一個img在指定的位置 createImage : function(fatherid, id) { var ipv = imgPreView; var imgHtml = ipv.imgStyle; var style = ""; var father = $("#"+fatherid); father.append(imgHtml); var endImg = $("#" + fatherid + " img:last-child"); endImg.attr("id", id); //如果預設不顯示,那麼要加入style風格 if(!ipv.defaultShow) { if(ipv.checkExpoler('MSIE 8.0')) { //style = "style='visibility:hidden;'"; endImg.css("visibility", "hidden"); } else { //style = "style='display:none;'"; endImg.css("display", "none"); } } //IE8是拿不到隱藏圖片的寬高的,所以不能把圖片隱藏. }, //圖片載入的時候. imgloaded : function(event) { var ipv = imgPreView; //如果不檢測,那麼不管 if(!ipv.checkSize) { return; } var imgTag = event.currentTarget; var width = 0; var height = 0; //8.0是拿不到隱藏的圖片寬高的 if(ipv.checkExpoler('MSIE 8.0')) { width = imgTag.clientWidth; height = imgTag.clientHeight; } else { width = imgTag.naturalWidth; height = imgTag.naturalHeight; } if(width != ipv.canWidth || height != ipv.canHeight) { ipv.hideImg(imgTag); $(imgTag).attr("src", ""); ipv.clearFileField(); } else { ipv.showImg(imgTag); } }, //顯示圖片 showImg : function(obj) { var ipv = imgPreView; if(ipv.checkExpoler('MSIE 8.0')) { $(obj).css("visibility", "visible"); } else { $(obj).css("display", "inline"); } }, //隱藏圖片 hideImg : function(obj) { var ipv = imgPreView; if(ipv.checkExpoler('MSIE 8.0')) { $(obj).css("visibility", "hidden"); } else { $(obj).css("display", "none"); } }, //清理檔案域 clearFileField : function() { var ipv = imgPreView; var file = $("#" + ipv.fileId); var cloneFile = file.clone().val(""); file.after(cloneFile); file.remove(); cloneFile.bind("change", ipv.onImgFileChange); }, //清理影象域 clearImageField : function() { var ipv = imgPreView; var imgs = $("#" + ipv.imgsId); if(ipv.useDefaultImg) { ipv.hideImg(imgs); } else { //直接清空 imgs.empty(); } } }; window.imgPreView = imgPreView; })(window);
測試html如下
<!DOCTYPE html> <html> <head> <title>HTML5上傳圖片預覽</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="jquery-1.8.3.min.js"></script> </head> <body> <h3>請選擇圖片檔案:JPG/GIF</h3> <form name="form0" id="form0" enctype="multiple/form-date" > <input type="file" name="file0" id="file0" multiple="multiple" /> <br> <div id="imgs"> <img src="" id="img0" > </div> </form> <script src="imgpreview.js" ></script> <script type="text/javascript"> $(function(){ imgPreView.fileId = "file0"; imgPreView.imgsId = "imgs"; imgPreView.loadMultImg = true; imgPreView.defaultShow = false; imgPreView.useDefaultImg = false; imgPreView.checkSize = true; $("#file0").bind("change", imgPreView.onImgFileChange); }); </script> </body> </html>
不能上傳專案,所以大家看著改吧.