uploadify和greybox插件的使用

最新推荐文章于 2022-09-13 10:48:41 发布

菜鸟面条

最新推荐文章于 2022-09-13 10:48:41 发布

阅读量651

点赞数

分类专栏：前台文章标签： uploadify greybox

本文链接：https://blog.csdn.net/u010256177/article/details/38109413

版权

前台专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在写代码之前，先将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>