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

修改了uploadify的封装，增加了上传的适用范围。

不要小看每一个努力的小人物，没有什么是不可能的

将每一件事情做到极致，尽自己最大的能力去做好，做的更全面。了解每一件事的原理和功能

1.jquery.data(name), jquery.data(name, value)

2.在基础框架中，不要使用具体的业务方法

/**
上传组件的封装
*/

(function($) {
	var templatePic='<div id="${fileID}" class="uploadify-queue-item">\
						<img id="pic${fileID}"><input type="hidden" name = "picUrl" id="imgSrc${fileID}"/>\
						<div class="cancel">\
							<a href="javascript:$(\'#${instanceID}\').uploadifyfile(\'cancel\', \'${fileID}\')">X</a>\
						</div>\
						<span class="fileName">${fileName} (${fileSize})</span><span class="data"></span>\
						<div class="uploadify-progress">\
							<div class="uploadify-progress-bar"><!--Progress Bar--></div>\
						</div>\
					</div>';
	
	var templateVideo = '<div id="${fileID}" class="uploadify-queue-item">\
						<input type="hidden" name = "fileUrl" id="fileSrc${fileID}"/>\
						<div class="cancel">\
							<a href="javascript:$(\'#${instanceID}\').uploadifyfile(\'cancel\', \'${fileID}\')">X</a>\
						</div>\
						<span class="fileName">${fileName} (${fileSize})</span><span class="data"></span>\
						<div class="uploadify-progress">\
							<div class="uploadify-progress-bar"><!--Progress Bar--></div>\
						</div>\
					</div>';
	
	var template = '<div id="${fileID}" class="uploadify-queue-item">\
							<div class="cancel">\
								<a href="javascript:$(\'#${instanceID}\').uploadifyfile(\'cancel\', \'${fileID}\')">X</a>\
							</div>\
							<span class="fileName">${fileName} (${fileSize})</span><span class="data"></span>\
							<div class="uploadify-progress">\
								<div class="uploadify-progress-bar"><!--Progress Bar--></div>\
							</div>\
						</div>';
	
	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);

实现：

<head>
		<%@ include file="/framework/core/jsp/commonJs.jsp" %>
		<script src="${path}/component/common/js/component.js"></script> 
		<script type="text/javascript">
			$.component.include("upload");
			$(function(){	
				//$("#uploadPic").uploadifyfile('uploadImg');
				$("#uploadPic").uploadifyfile('uploadImgMulti');
				$("#uploadVideo").uploadifyfile('uploadVideo');
				
				$("#uploadQueue").uploadifyfile('uploadQueue');
			});
			function save () {
				//利用ajax表单提交
				var formData = $("#jvform").serialize();
				alert(formData);
			} 
		
		</script>
	</head>
	<body>
		<form id="jvform"  method="post">
			收货人：<input type="text" name ="shopperName" readonly="readonly" value="........."/>
			电话：<input type="text" name ="shopperPhone" readonly="readonly" value="xxxxxxxxxx"/>
			//picUrl
			图片:<input type="file"  id="uploadPic" name="filedata"/>
			//fileUrl
			视频:<input type="file"  id="uploadVideo" name="filedata"/>
			文件:<input type="file"  id="uploadQueue" name="filedata"/>
			<a href="javascript:$('#uploadQueue').uploadifyfile('upload')">上传</a>
		</form>
		<a href="javascript:void(0);" οnclick="save()">提交订单</a>
	</body>

效果图：