jquery는 브라우저 호환 이미지 업로드 로컬 미리보기 function_jquery를 구현합니다.

1. 로컬 미리보기를 위한 이미지 업로드

이미지 업로드 기능으로 인해 이제 대부분의 이미지는 사용자가 효과를 더 잘 경험하고 증명할 수 있도록 로컬에서 미리보아야 합니다. 완성된 제품 중 여러 브라우저와 호환되어야 합니다. 이 예제 플러그인은 각 예제를 통해 통합되며 Firefox, Google 및 IE8과 호환됩니다.

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

(function($){
jQuery.fn.extend({
uploadPreview : 함수(opts){
opts = jQuery.extend({
너비: 0,
높이: 0,
imgPreview: null,
imgType: ["gif", "jpeg" , "jpg", "bmp", "png "],
콜백: function(){ return false }
}, opts ||
var _self = this;
var _this = $(this);
var imgPreview = $(opts.imgPreview);
//스타일 설정
autoScaling = function(){
imgPreview.css({"margin -left": 0,"margin-top" : 0,"width":opts.width,"height":opts.height});
imgPreview.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
}
if ($.browser.msie) {//판단, 즉
var path = $(this).val(); >if (/"wW"/.test (경로)) {
path = path.slice(1,-1)
}
imgPreview.attr("src",path); >imgPreview.css({"margin-left ": 0,"margin-top": 0,"width":opts.width,"height":opts.height})
setTimeout("autoScaling()" , 100);
}
else {
if ($.browser.version < 7) {
imgPreview.attr('src', this.files.item(0).getAsDataURL( ));
else {
oFReader = new FileReader(), rFilter = /^(?:image/bmp|image/cis-cod|image/gif|image/ief|image/jpeg |image/jpeg|image/jpeg|이미지 /pipeg|image/png|image/svg xml|image/tiff|image/x-cmu-raster|image/x-cmx|image/x-icon|image/x- 휴대용-anymap|이미지/x-portable- bitmap|이미지/x-portable-graymap|이미지/x-portable-pixmap|이미지/x-rgb|이미지/x-xbitmap|이미지/x-xpixmap|이미지/x- xwindowdump)$/i;
oFReader .onload = function(oFREvent){
imgPreview.attr('src', oFREvent.target.result)
}; [0];
oFReader.readAsDataURL(oFile)
}
imgPreview.css({"margin-left": 0,"margin-top": 0,"width":opts.width, "height":opts.height});
setTimeout("autoScaling()", 100)
}
}
opts.callback()
}); }
});
})(jQuery)



2. 호출 방법

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

jQuery(function(){ jQuery("#idFile1").uploadPreview({ width : 100, 높이: 100, imgPreview: "#idImg1", imgType: ["bmp", "gif", "png", "jpg"],

콜백: 함수( ) {

ip1();
return false
}
);