1. 程式人生 > >上傳外掛,較輕量級,帶進度條 jquery.uploadify

上傳外掛,較輕量級,帶進度條 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>