上传插件，较轻量级，带进度条 jquery.uploadify

jquery.uploadify+upload.js
upload.js

//附件的路径
var adjunctPath='';

//附件上传失败则不能保存
var canSubmit=true;

var uploadify=$("#uploadify");

var uploader="";

function getRootPath(){  
    var pathName=window.document.location.pathname;  
    //获取带"/"的项目名，如：/uimcardprj  
    var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);  
    return(projectName);  
} 

function prepareUpload(uploadFold,size){
	uploader=$("#uploadify").uploadify({  
        'auto'           : false,  
        'swf'            : getRootPath()+'/resources/js/upload/uploadify.swf',  
        //这个的作用是为了上传
        'uploader'       : getRootPath()+'/book/upload',  
        'formData'       : {"fold":uploadFold},
        'queueID'        : 'fileQueue',//与下面的id对应  
        'queueSizeLimit' : size,  
        'fileTypeDesc'   : '*.png;*.gif;*.jpg;*.bmp;*.jpeg;',  
        'fileTypeExts'   : '*.png;*.gif;*.jpg;*.bmp;*.jpeg;', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc  
        'multi'          : true,  
        'buttonText'     : '添加图片',
        'cancel'         : getRootPath()+'/resources/js/upload/uploadify-cancel.png',
	    'onUploadSuccess':function(file, data, response){//上传成功后获得回调函数,这里为了取得文件上传成功后的保存路径
//	    	adjunctPath+=data+";";
	    	adjunctPath+=data;
	    	//这里就调用了onUploadSuccess()，在另一js中有定义
	    	onUploadSuccess();
	    },
	    'onUploadError':function(file, errorCode, errorMsg, errorString){//上传错误的信息
	    	canSubmit=false;
	    	onUploadError();
	    },
	    'onQueueComplete' : function(queueData) {//上传队列全部完成后执行的回调函数
	    	onQueueComplete();
	    },
	    'onSelect':function(file){
	    	onSelect(file);
	    }
	    } );
}

一个比较通用的js

$(function(){
	prepareUpload("",1);
	
	//提交表单
	$("#submitBtn").click(function(){
		//验证表单
		if($("#dataForm").valid()){
			if($("#fileQueue").text()!=''){
				var date=new Date();
				var fold=date.format("yyyyMMddhhmmss")+"_"+$("#name").val();
				//开始上传
				$("#uploadify").uploadify("settings","formData",{'fold':fold});
				$('#uploadify').uploadify('upload','*');
			}else{
				//setVMessage("请选择要上传的课件！");
				alert("请选择要上传的图片！");
			}
		}
	});
});


/**
 * 日期格式化，格式化为自己想要的，如20140527
 */
Date.prototype.format = function(format){ 
	var o = { 
	"M+" : this.getMonth()+1, //month 
	"d+" : this.getDate(), //day 
	"h+" : this.getHours(), //hour 
	"m+" : this.getMinutes(), //minute 
	"s+" : this.getSeconds(), //second 
	"q+" : Math.floor((this.getMonth()+3)/3), //quarter 
	"S" : this.getMilliseconds() //millisecond 
	}

	if(/(y+)/.test(format)) { 
	format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
	} 

	for(var k in o) { 
	if(new RegExp("("+ k +")").test(format)) { 
	format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length)); 
	} 
	} 
	return format; 
	} 

/*
 * 上传插件的方法重载
 * 	
 * start
 */
function onSelect(file){
	var fileName=file.name;
	fileName=fileName.substring(0,fileName.lastIndexOf("."));
	//给id="name"注入值，为fileName
	$("#name").val(fileName);
}

function onUploadSuccess(){
	//给id = "dirPath"注入值，为存储的位置，在upload.js中可以看到
	$("#dirPath").val(adjunctPath);
	//upload.js有这么一句话:
	//附件上传失败则不能保存
	//var canSubmit=true;
	if(canSubmit){
		document.dataForm.submit();
	}
}

jsp中引用这三个js，然后注意form表单的id和name，最后提交做成按钮形式，因为

$("#submitBtn").click(function(){

<style type="text/css">
            .uploadify-button {
                background-color: transparent;
                border: none;
                padding: 0;
            }
            .uploadify:hover .uploadify-button {
                background-color: transparent;
            } 
</style>

<input type = "hidden" id = "dirPath" name= "dirPath" />
			<table>
				<tr>
							<th>选择封面插图：</th>
							<td><input type="file" name="uploadify" id="uploadify" />
								<h6>*只支持单个图片上传</h6>
								<div id="fileQueue"></div></td>
						</tr>
				<tr>