jquery 本地图片浏览
jquery 本地图片浏览(支持ie7,8)
// 本地图片浏览,此插件依赖 JCrop 切图插件 jQuery.fn.extend({ avatarPreview: function (opts) { var _self = this, _this = $(this), _jcrop; opts = jQuery.extend({ imgId: "avatarImg", squareSide: 500, imgType: ["gif", "jpeg", "jpg", "png"], callback: function () { return; } }, opts || {}); _self.isIE = function () { var _ua = navigator.userAgent.toLowerCase(); // ie6mode = /msie [1-6]\./.test(_ua); return /msie/.test(_ua); }; _self.getFileURL = function (fileObj) { var url; if (_self.isIE()) { _self.select(); _self.blur(); url = document.selection.createRange().text; document.selection.empty(); } else if (window.createObjectURL != undefined) { url = window.createObjectURL(fileObj.files[0]) } else if (window.URL != undefined) { url = window.URL.createObjectURL(fileObj.files[0]) } else if (window.webkitURL != undefined) { url = window.webkitURL.createObjectURL(fileObj.files[0]) } return url }; _self.uploadJcrop = function (imgObj) { imgObj.Jcrop({ aspectRatio: 1, setSelect: [0, 0, 280, 280], minSize: [100, 100], onSelect: this.onChange, onChange: function (coords) { $('#user_crop_x').val(coords.x); $('#user_crop_y').val(coords.y); $('#user_crop_w').val(coords.w); $('#user_crop_h').val(coords.h); } }, function () { return _jcrop = this }); }; _self.removeOldJcrop = function () { if (_jcrop) { _jcrop.destroy(); } }; _this.getStyle = function (obj) { if (obj == undefined) return 'height:' + opts.squareSide + 'px;width:' + opts.squareSide + 'px;' if (obj.height > obj.width) { var imgStyle = 'height:' + opts.squareSide + 'px;width:auto'; } else { var imgStyle = 'width:' + opts.squareSide + 'px;height:auto' } return imgStyle }; _this.getStyleForIE = function (imgTag, imageUrl) { var testDiv = document.createElement("div"); imgTag.after(testDiv).hide(); testDiv.style.width = "10px"; testDiv.style.height = "10px"; testDiv.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);'; testDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imageUrl; var imgStyle, scaling, height = parseFloat(testDiv.offsetHeight), width = parseFloat(testDiv.offsetWidth); if (height > 0 && width > 0) { if (width >= height) { imgStyle = 'width:500px; height:' + 500 * height / width + 'px'; } else { imgStyle = 'height:500px; width:' + 500 * width / height + 'px'; } } $(testDiv).remove(); return imgStyle; }; _this.change(function () { if (this.value) { if (!RegExp("\.(" + opts.imgType.join("|") + ")$", "i").test(this.value.toLowerCase())) { alert("请选择" + opts.imgType.join("、") + '类型的图片。'); this.value = ""; return false } _self.removeOldJcrop(); var imgTag = $("#" + opts.imgId); if (imgTag.length > 0) { var imageUrl = _self.getFileURL(this); if (_self.isIE()) { var _div = $('<div id="ieImg"></div>'); _div.attr('style', _this.getStyleForIE(imgTag, imageUrl)).css({"filter": "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='" + imageUrl + "')"}); imgTag.attr('src', '').hide().after(_div); _self.uploadJcrop(_div); } else { $("<img/>").attr("src", imageUrl).load(function () { imgTag.attr('src', imageUrl).attr('style', _this.getStyle(this)); _self.uploadJcrop(imgTag); }); } opts.callback(); } } }) } }); ## IE9 function PreviewImg(imgFile){ var oldPreview = document.getElementById( "oldPreview" ); oldPreview.innerHTML = "<img src=\"file:\\\\" + imgFile.value + "\" /> "; }
相关推荐
ppsurcao 2020-06-14
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18