jquery はブラウザ互換の画像アップロードのローカル プレビューを実装します function_jquery

1. ローカル プレビューを実現するための画像のアップロード

画像のアップロード機能により、ユーザーがより効果を体験して証明できるようにするために、ほとんどの画像をローカルでプレビューする必要があります。このサンプル プラグインは、各サンプルを通じて統合されており、Firefox、Google、および IE8 と互換性があります。

コードをコピーします コードは次のとおりです:

(function($){
jQuery.fn.extend({
uploadPreview : function(opts){
opts = jQuery.extend({
width: 0,
height: 0,
imgPreview: null,
imgType: ["gif", "jpeg" , "jpg", "bmp", "png "],
callback: function(){ return false; }
},

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.slice(1,-1)
}
imgPreview.attr("src",path); >imgPreview.css({"margin-left ": 0,"margin-top": 0,"width":opts.width,"height":opts.height}); , 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|image /pipeg|image/png|image/svg xml|image/tiff|image/x-cmu-raster|image/x-cmx|image/x-icon|image/x-ポータブル-anymap|image/x-portable-bitmap|image/x-portable-graymap|image/x-portable-pixmap|image/x-rgb|image/x-xbitmap|image/x-xpixmap|image/x- xwindowdump)$/i;
oFReader = function(oFREvent){
imgPreview.attr('src', oFREvent.target.result);
var oFile = this.files [0];
oFReader.readAsDataURL (oFile);
}
imgPreview.css({"margin-left": 0,"width":opts.width, "高さ":opts.height});
setTimeout("autoScaling()", 100)
}
}
opts.callback()
}
})(jQuery);



2. メソッド

の呼び出しコードをコピーします
コードは次のとおりです:

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

callback: function( ) {

ip1();
を返します
});