php多图片上传并回显,图片上传后回显，支持多张图片上传

/**

上传组件的封装

*/

(function($) {

var templatePic='

\

\

\

X\

\

${fileName} (${fileSize})\

\

\

';

var templateVideo = '

\

\

\

X\

\

${fileName} (${fileSize})\

\

\

';

var template = '

\

\

X\

\

${fileName} (${fileSize})\

\

\

';

var defaultConstants={

swf      : globals.path+'/component/module/uploadify/js/uploadify.swf', //swf的路径

uploader : globals.path+'/fs/file/upload',                           //实际的上传路径的动作

fileObjName     : 'filedata',

itemTemplate    : template,              //上传项模板

auto            : true,

multi           : true,

fileSizeLimit   : 0,                    //上传大小限制

fileTypeExts    : '*.*',                //上传后缀名

buttonText      : '上传文件',

height          : 30,

width           : 120,

progressData    : 'percentage',

removeCompleted : false,                //上传后,文件不自动隐藏

uploadLimit     : 10,

onUploadSuccess : function(file,data,response){

}

};

function resetParams(){

defaultConstants={

swf      : globals.path+'/component/module/uploadify/js/uploadify.swf', //swf的路径

uploader : globals.path+'/fs/file/upload',                           //实际的上传路径的动作

fileObjName     : 'filedata',

itemTemplate    : template,              //上传项模板

auto            : true,

multi           : true,

fileSizeLimit   : 0,                    //上传大小限制

fileTypeExts    : '*.*',                //上传后缀名

buttonText      : '上传文件',

height          : 30,

width           : 120,

progressData    : 'percentage',

removeCompleted : false,                //上传后,文件不自动隐藏

uploadLimit     : 10,

onUploadSuccess : function(file,data,response){

}

};

}

var video='*.avi; *.mp4; *.mov; *.wmv; *.flv; *.swf; *.mkv; *.rm; *.rmvb';

var img='*.gif; *.jpg; *.png; *.bmp; *.jpeg';

var methods = {

//默认执行方法

init : function(options) {

var $this = $(this);

var settings = $.extend(defaultConstants,options);

$("#" + $this.attr('id')).uploadify(settings);

resetParams();//重置参数

return this.each(function() {

});

},

//上传单个图片

uploadImg : function(options){

var $this = $(this);

var id=$this.attr('id');

var defaults={

multi           : false,

itemTemplate    : templatePic,

fileSizeLimit   : '1MB',

fileTypeExts    : img,

buttonText      : '上传图片',

onUploadSuccess : function(file,data,response){

if (response) {

$("#imgSrc"+file.id).val(data);

$("#pic"+file.id).attr("src",globals.path+"/fs/file/showPic?fileName=100x100_"+data);

}

}

};

var settings = $.extend($.extend(defaultConstants,defaults),options);

var successCallback = settings.onUploadSuccess;

settings.onUploadSuccess = function(file,data,response){

successCallback(file,data,response);//保持原方法可以用

$("#" + id).uploadify('disable', true);//使上传按钮不可用

};

$("#" + id).uploadify(settings);

resetParams();//重置参数

},

//上传多个图片

uploadImgMulti : function(options){

var $this = $(this);

var defaults={

fileSizeLimit   : '1MB',

itemTemplate    : templatePic,

fileTypeExts    : img,

buttonText      : '上传图片',

onUploadSuccess : function(file,data,response){

if (response) {

$("#imgSrc"+file.id).val(data);

$("#pic"+file.id).attr("src",globals.path+"/fs/file/showPic?fileName=100x100_"+data);

}

}

};

var settings = $.extend($.extend(defaultConstants,defaults),options);

$("#" + $this.attr('id')).uploadify(settings);

resetParams();

},

//上传单个视频

uploadVideo : function(options){

var $this = $(this);

var id = $this.attr('id');

var defaults={

multi           : false,

fileSizeLimit   : '100MB',

itemTemplate    : templateVideo,

fileTypeExts    : video,

buttonText      : '上传视频',

onUploadSuccess : function(file,data,response){

if (response) {

$("#fileSrc"+file.id).val(data);

}

}

};

var settings = $.extend($.extend(defaultConstants,defaults),options);

var successCallback = settings.onUploadSuccess;

settings.onUploadSuccess = function(file,data,response){

successCallback(file,data,response);

$("#" + id).uploadify('disable', true);//设置上传按钮不可用

};

$("#" +  id).uploadify(settings);

resetParams();

},

//上传多个视频

uploadVideoMulti : function(options){

var $this = $(this);

var defaults={

fileSizeLimit   : '100MB',

itemTemplate    : templateVideo,

fileTypeExts    : video,

buttonText      : '上传视频',

onUploadSuccess : function(file,data,response){

if (response) {

$("#fileSrc"+file.id).val(data);

}

}

};

var settings = $.extend($.extend(defaultConstants,defaults),options);

$("#" +  $this.attr('id')).uploadify(settings);

resetParams();

},

//上传队列

uploadQueue : function(options){

var $this = $(this);

var defaults={

auto            : false,

buttonText      : '队列上传'

};

var settings = $.extend($.extend(defaultConstants,defaults),options);

$("#" +  $this.attr('id')).uploadify(settings);

resetParams();

return this.each(function() {

});

},

//自定义取消的效果

cancel : function(fileID) {

var $this = $(this);

var id = $this.attr('id');

$("#" + id).uploadify('disable', false);

$("#" + id).uploadify('cancel',fileID);

},

upload : function () {

var $this = $(this);

var id = $this.attr('id');

$("#" + id).uploadify('upload');

},

};

$.fn.uploadifyfile = function(method) {

if (methods[method]) {

return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));

} else if (typeof method === 'object' || !method) {//如果没有制定的方法,直接使用init

return methods.init.apply(this, arguments);

} else {

$.error('The method ' + method + ' does not exist in $.uploadify');

}

};

})(jQuery);