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({
width: 0,
height: 0,
imgDiv: "#imgDiv",
imgType: ["gif", "jpeg", "jpg", "bmp" , "png"],
callback: function() { return false; }
}, opts ||
var _self = this = $(this);
var imgDiv = $(opts.imgDiv);
imgDiv.width (opts.width);
autoScaling = function(); 🎜>if ($.browser.version == "7.0" || $.browser .version == "8.0") imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "画像";
var img_width = imgDiv.width();
var img_height = imgDiv.height();
if (img_width > 0 && img_height > 0) {
var rate = ( opts.width / img_width
imgDiv.height(img_height * rate);
imgDiv.width(img_width);
imgDiv.height(img_height); left = (opts.width - imgDiv.width()) * 0.5;
var top = (opts.height - imgDiv.height()) * 0.5;
imgDiv.css({ "margin-left": left, "margin-top": トップ });
imgDiv.show( );
}
}
_this.change(function() {
if (this.value) {
if (!RegExp(".(" opts.imgType.join(" |") ")$", "i").test(this.value.toLowerCase())) {
alert("画像タイプは、「 opts.imgType.join(", ") " kind");
this.value = "";
return false;
}
imgDiv.hide( );
if ($.browser.msie) {
if ( $.browser.version == "6.0") {
var img = $("
"); 🎜>imgDiv.replaceWith(img); imgDiv = img;
var 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.attr('src', this.files.item(0).getAsDataURL() );
imgDiv.css({ "vertical-align": "middle" });
setTimeout("autoScaling()", 100);
}
}
});
}
});
})(jQuery);
ページ部分:
コードをコピーします>
コードは次のとおりです: