頭像上傳前本地預覽功能的實現(相容ie8)
阿新 • • 發佈：2018-11-06
以下程式碼為頭像的上傳前預覽功能的實現，UI可自行發揮。可用form表單提交檔案，也可使用jquery.form.js外掛實現。下面demo中使用的form提交。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <form action="demo.php" enctype="multipart/form-data"> <input type="file" id="up" name="userImg"> <img id="ImgPr" width="120" height="120"/> <input type="submit"/> </form> <script src="jquery-1.8.3.min.js"></script> <script> $(function () { $("#up").uploadPreview(); }); </script> <script> jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(this); opts = jQuery.extend({ //指定預覽照片的容器 Img: "ImgPr", //指定容器寬高 Width: 100, Height: 100, //指定可上傳檔案的型別 ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () {} }, opts || {}); _self.getObjectURL = function (file) { var url = null; if (window.createObjectURL != undefined) { url = window.createObjectURL(file) } else if (window.URL != undefined) { url = window.URL.createObjectURL(file) } else if (window.webkitURL != undefined) { url = window.webkitURL.createObjectURL(file) } return url }; _this.change(function () { if (this.value) { if (!RegExp("\.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) { alert("選擇檔案錯誤,圖片型別必須是" + opts.ImgType.join("，") + "中的一種"); this.value = ""; return false } if ($.browser.msie) { try { $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0])) } catch (e) { var src = ""; var obj = $("#" + opts.Img); var div = obj.parent("div")[0]; _self.select(); if (top != self) { window.parent.document.body.focus() } else { _self.blur() } src = document.selection.createRange().text; document.selection.empty(); obj.hide(); obj.parent("div").css({ 'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)', 'width': opts.Width + 'px', 'height': opts.Height + 'px' }); div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src } } else { $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0])) } opts.Callback() } }) } }); </script> </body> </html>