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

修改了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);" onclick="save()">提交订单</a>
</body>

效果图：