jquery 이미지 업로드 비례 미리보기 플러그인 collection_jquery

js 부분은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

// **** ******************사진 업로드 미리보기 플러그인********************** **
/ /저자: IDDQD(2009-07-01)
//이메일: iddqd5376@163.com
//http://blog.sina.com.cn/iddqd
//버전: 1.0

//설명: 이미지 업로드 미리보기 플러그인
//업로드 시 고정된 너비와 높이 범위 내에서 비례적인 크기 조정 이미지를 생성할 수 있습니다

// 매개변수 설정:
//width 이미지 저장을 위한 고정 크기 컨테이너의 너비
//height 이미지 저장을 위한 고정 크기 컨테이너의 높이
//imgDiv 페이지 DIV의 JQuery ID
//imgType 배열 접미사 이름
//**** ******************이미지 업로드 미리보기 플러그인******** ****************
(function($) {
jQuery.fn.extend({
uploadPreview: function(opts) {
opts = jQuery.extend({
너비: 0,
높이: 0,
imgDiv: "#imgDiv",
imgType: ["gif", "jpeg", "jpg", "bmp" , "png"],
콜백: function() { return false }
}, opts || {})
var _self = this = $(this);
var imgDiv = $(opts.imgDiv);
imgDiv.width(opts.width);
imgDiv.height(opts.height);

autoScaling = function() {
if ($.browser.version == "7.0" || $.browser .version == "8.0") imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = " image";
var img_width = imgDiv.width();
var img_height = imgDiv.height();
if (img_width > 0 && img_height > 0) {
var rate = ( opts.width / img_width if (rate <= 1) {
if ($.browser.version == "7.0" || $.browser.version == "8.0") imgDiv.get (0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale"
imgDiv.width(img_width) * rate)
imgDiv.height(img_height * rate);
} else {
imgDiv.width(img_width)
imgDiv.height(img_height); 왼쪽 = (opts.width - imgDiv.width()) * 0.5;
var top = (opts.height - imgDiv.height()) * 0.5;
imgDiv.css({ "margin-left": left, "margin-top": top });
imgDiv.show( )
}
}
_this.change(function() {
if (this.value) {
if (!RegExp(".(" opts.imgType.join(" |") ")$", "i").test(this.value.toLowerCase())) {
alert(" 이미지 유형은 " opts.imgType.join(", ") " 종류");
this.value = "";
return false;
}
imgDiv.hide( );
if ($.browser.msie) {
if ( $.browser.version == "6.0") {
var img = $(""); 🎜>imgDiv.replaceWith(img);
imgDiv = img;

var image = new Image()
image.src = 'file:///' this.value; >
imgDiv.attr('src', image.src);
autoScaling();
}
else {
imgDiv.css({ 필터: "progid:DXImageTransform.Microsoft. AlphaImageLoader(sizingMethod=image)" });
imgDiv.get(0) .filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
try {
imgDiv.get (0).filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = this.value;
} catch (e) {
alert("잘못된 이미지 파일입니다! ");
return;
}
setTimeout("autoScaling()", 100);

}
}
else {
var img = $( "");
imgDiv.replaceWith(img);
imgDiv = img;
imgDiv.attr('src', this.files.item(0).getAsDataURL() );
imgDiv.css({ "vertical-align": "middle" })
setTimeout("autoScaling()", 100)
}
}
});
}
});
})(jQuery)


페이지 부분:

코드 복사

코드는 다음과 같습니다.

<제목>







<본문>