uploadify和greybox插件的使用

原創

2020-02-21 15:53

在寫代碼之前，先將uploadify和grebox的插件拷貝到項目裏面

不用說，讓我們先看看代碼和效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Uploadify</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
        <link href="css/uploadify.css" rel="stylesheet" type="text/css" />
        <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" href="css/style.css">
		<script type="text/javascript">
		    var GB_ROOT_DIR = "greybox/";
		</script>
		<script type="text/javascript" src="greybox/AJS.js"></script>
		<script type="text/javascript" src="greybox/AJS_fx.js"></script>
		<script type="text/javascript" src="greybox/gb_scripts.js"></script>
        <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="js/swfobject.js"></script>
        <script type="text/javascript" src="js/jquery.uploadify.v2.1.0.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		showPictures();
		$("#uploadify").uploadify({
			'uploader' : 'uploadify.swf', //指定上傳控件的主體文件
			'script' : 'servlet/Upload?action=insertImage',//指定服務器端上傳處理文件
			'cancelImg' : 'images/cancel.png',//指定取消上傳的圖片
			//'folder'         : 'uploads',    //您想將文件保存到的路徑
			'queueID' : 'fileQueue', //隊列
			'auto' : false, //選定文件後是否自動上傳
			'multi' : true, //是否允許同時上傳多個文件
			'simUploadLimit' : 2, //多文件上傳時，同時上傳文件數目限制
			'buttonText' : 'BROWSE' //按鈕顯示文字,不支持中文，要用中文直接用背景圖片cancelImg設置
		});
	});
	
    //添加一行
	 function addRow()
	    {
	    //添加一行
	    var newTr = testTbl.insertRow();
	    return newTr;
	    }
    //添加一列
	function addImage(newTr,image){
		var newTd1 = newTr.insertCell();
	    newTd1.innerHTML =  "<a href= " +image + " title='操哥要改的地方' rel='gb_imageset[photos]'> <img src=" +image + " width='100' height='120'> </a>";
	}
    //加載數據庫中圖片的路徑
    function getLoadImage(){
    	var result;
    	 $.ajax({
    		 async:false,
             type: "POST",
             url: "servlet/Upload",
             data:{action:'getAllImage'}, 
             dataType: "json",
             success: function(data){
            	 result=data;//從後臺取到數據
            	 
             }
         });
    	 return result;
    }
    function showPictures(){
    	var result=getLoadImage();
    	 var jsObject = eval(result);    //轉換爲json對象
      	  var total = jsObject.length;  //獲取所有圖片的總記錄數
      	  var totalRows = total/10; //獲取一共多少行
      	  var newtree = new Array();  //行定義爲數組
   		  for(var i=0;i<totalRows;i++){  //創建行，併爲行賦值
   			 newtree[i] = addRow();
   		      }
   		    for(var i=0;i<totalRows;i++){
   		    	for(var j=0;j<10;j++){
   		    		var jj = i*10 + j;
   		    		addImage(newtree[i],jsObject[jj]);
   		    	}
   		    }
    }
</script>
</head>
<body>
	<div id="fileQueue"></div>
	<input type="file" name="uploadify" id="uploadify" />
	<p>
		<a href="javascript:jQuery('#uploadify').uploadifyUpload()">開始上傳</a> 
		<a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上傳</a>
	</p>
	<table id="testTbl"></table>
</body>
</html>