<?php include("../../../../config/admin.php"); ?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文件上传</title>

<script src="../../../js/jquery.js" charset="utf-8"></script>
<script src="../../../js/layui/layui.js" charset="utf-8"></script>
<link href="../../../js/layui/css/layui.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style type="text/css">


.webuploader-container { position: relative; }
.webuploader-element-invisible { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px,1px,1px,1px); }
.webuploader-pick { position: relative; display: inline-block; cursor: pointer; background: #00b7ee; padding: 10px 15px; color: #fff; text-align: center; border-radius: 3px; overflow: hidden; }
.webuploader-pick-hover { background: #00a2d4; }
.webuploader-pick-disable { opacity: 0.6; pointer-events: none; }

#container { color: #838383; font-size: 12px; }
#uploader { border-bottom-width: 10px; border-bottom-style: solid; border-bottom-color: #F2F2F2; overflow: hidden; padding: 10px; }
#uploader .queueList { overflow: hidden; }
#uploader .queueList.filled { padding: 0px; margin: 0; border: 3px dashed transparent; }
#uploader .queueList.webuploader-dnd-over { border: 3px dashed #999999; }
#uploader p { margin: 0; }
.element-invisible { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px,1px,1px,1px); }
#uploader .placeholder { color: #cccccc; font-size: 18px; position: relative; background-image: url(image.png); background-repeat: no-repeat; background-position: center 93px; overflow: hidden; }
#uploader .placeholder .webuploader-pick { font-size: 14px; background: #00b7ee; border-radius: 3px; line-height: 40px; *width: 120px;
color: #fff; display: inline-block; cursor: pointer; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); margin-top: 0; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 0; padding-right: 15px; padding-bottom: 0; padding-left: 15px; }
#uploader .placeholder .webuploader-pick-hover { background: #00a2d4; }
#uploader .placeholder .flashTip { color: #666666; font-size: 12px; position: absolute; width: 100%; text-align: center; bottom: 10px; }
#uploader .placeholder .flashTip a { color: #0785d1; text-decoration: none; }
#uploader .placeholder .flashTip a:hover { text-decoration: underline; }
#uploader .filelist { list-style: none; margin: 0; padding: 0; overflow: hidden; }
#uploader .filelist:after { content: ''; display: block; width: 0; height: 0; overflow: hidden; clear: both; }
#uploader .filelist li { width: 100px; height: 100px; background: url(bg.png) no-repeat; text-align: center; margin: 0 8px 20px 0; position: relative; display: inline; float: left; overflow: hidden; font-size: 12px; }
#uploader .filelist li p.log { position: relative; top: -45px; }
#uploader .filelist li p.title { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; white-space: nowrap; text-overflow : ellipsis; top: 5px; text-indent: 5px; text-align: left; }
#uploader .filelist li p.progress { position: absolute; width: 100%; bottom: 0; left: 0; height: 8px; overflow: hidden; z-index: 50; margin: 0; border-radius: 0; background: none; -webkit-box-shadow: 0 0 0; }
#uploader .filelist li p.progress span { display: none; overflow: hidden; width: 0; height: 100%; background: #1483d8 url(iamges/progress.png) repeat-x; -webit-transition: width 200ms linear; -moz-transition: width 200ms linear; -o-transition: width 200ms linear; -ms-transition: width 200ms linear; transition: width 200ms linear; -webkit-animation: progressmove 2s linear infinite; -moz-animation: progressmove 2s linear infinite; -o-animation: progressmove 2s linear infinite; -ms-animation: progressmove 2s linear infinite; animation: progressmove 2s linear infinite; -webkit-transform: translateZ(0); }
 @-webkit-keyframes progressmove { 0% {
 background-position: 0 0;
}
 100% {
 background-position: 17px 0;
}
}
@-moz-keyframes progressmove { 0% {
 background-position: 0 0;
}
 100% {
 background-position: 17px 0;
}
}
@keyframes progressmove { 0% {
 background-position: 0 0;
}
 100% {
 background-position: 17px 0;
}
}
#uploader .filelist li p.imgWrap { position: relative; z-index: 2; line-height: 20px; vertical-align: middle; overflow: hidden; width: 110px; height: 110px; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webit-transition: 200ms ease-out; -moz-transition: 200ms ease-out; -o-transition: 200ms ease-out; -ms-transition: 200ms ease-out; transition: 200ms ease-out; }
#uploader .filelist li img { width: 100%; }
#uploader .filelist li p.error { background: #f43838; color: #fff; position: absolute; bottom: 0; left: 0; height: 28px; line-height: 28px; width: 100%; z-index: 100; }
#uploader .filelist li .success { display: block; position: absolute; left: 0; bottom: 0; height: 40px; width: 100%; z-index: 200; background: url(success.png) no-repeat right bottom; }
#uploader .filelist div.file-panel { position: absolute; height: 0; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#80000000', endColorstr='#80000000')\0;
background: rgba( 0, 0, 0, 0.5 ); width: 100%; top: 0; left: 0; overflow: hidden; z-index: 300; }
#uploader .filelist div.file-panel span { width: 24px; height: 24px; display: inline; float: right; text-indent: -9999px; overflow: hidden; background: url(images/icons.png) no-repeat; margin: 5px 1px 1px; cursor: pointer; }
#uploader .filelist div.file-panel span.rotateLeft { background-position: 0 -24px; }
#uploader .filelist div.file-panel span.rotateLeft:hover { background-position: 0 0; }
#uploader .filelist div.file-panel span.rotateRight { background-position: -24px -24px; }
#uploader .filelist div.file-panel span.rotateRight:hover { background-position: -24px 0; }
#uploader .filelist div.file-panel span.cancel { background-position: -48px -24px; }
#uploader .filelist div.file-panel span.cancel:hover { background-position: -48px 0; }
#uploader .statusBar { border-top: 1px solid #dadada; padding: 0; line-height: 40px; vertical-align: middle; position: relative; }
#uploader .statusBar .progress { border: 1px solid #1483d8; background: #fff; height: 18px; position: relative; display: inline-block; text-align: center; line-height: 20px; color: #6dbfff; position: relative; margin: 0 10px 0 0; font-size: 14px; }
#uploader .statusBar .progress span.percentage { width: 0; height: 100%; left: 0; top: 0; background: #1483d8; position: absolute; }
#uploader .statusBar .progress span.text { position: relative; z-index: 10; }
#uploader .statusBar .info { display: inline-block; font-size: 14px; color: #666666; }
#uploader .statusBar .btns { line-height: 40px; overflow: hidden; margin-top: 10px; }
#filePicker2 { display: inline-block; }
#uploader .statusBar .btns .webuploader-pick, #uploader .statusBar .btns .uploadBtn, #uploader .statusBar .btns .uploadBtn.state-uploading, #uploader .statusBar .btns .uploadBtn.state-paused { background: #ffffff; border: 1px solid #cfcfcf; color: #565656; display: inline-block; border-radius: 3px; cursor: pointer; font-size: 12px; padding-top: 0; padding-right: 10px; padding-bottom: 0; padding-left: 10px; }
#uploader .statusBar .btns .webuploader-pick-hover, #uploader .statusBar .btns .uploadBtn:hover, #uploader .statusBar .btns .uploadBtn.state-uploading:hover, #uploader .statusBar .btns .uploadBtn.state-paused:hover { background: #f0f0f0; }
#uploader .statusBar .btns .uploadBtn { background: #00b7ee; color: #fff; border-color: transparent; }
#uploader .statusBar .btns .uploadBtn:hover { background: #00a2d4; }
#uploader .statusBar .btns .uploadBtn.disabled { pointer-events: none; opacity: 0.6; display: none; }
#picker { display: inline-block; line-height: 1.428571429; vertical-align: middle; margin: 0 12px 0 0; }
#picker .webuploader-pick { display: block; padding-top: 6px; padding-right: 6px; padding-bottom: 6px; padding-left: 6px; }
#uploader-demo .thumbnail { width: 110px; height: 110px; }
#uploader-demo .thumbnail img { width: 100%; }
.uploader-list { width: 100%; overflow: hidden; }
.file-item { float: left; position: relative; margin: 0 20px 20px 0; padding: 0px; }
.file-item .error { position: absolute; top: 4px; left: 4px; right: 4px; background: red; color: white; text-align: center; height: 20px; font-size: 14px; line-height: 23px; }
.file-item .info { position: absolute; left: 0px; bottom: 0px; right: 0px; height: 20px; line-height: 20px; text-indent: 5px; background: rgba(0, 0, 0, 0.6); color: white; overflow: hidden; white-space: nowrap; text-overflow : ellipsis; font-size: 12px; z-index: 10; }
.upload-state-done:after { font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 32px; position: absolute; bottom: 0; right: 4px; color: #4cae4c; z-index: 99; }
.file-item .progress { position: absolute; right: 0px; bottom: 0px; height: 3px; left: 0px; height: 2px; overflow: hidden; z-index: 15; margin: 0; padding: 0; border-radius: 0; background: transparent; }
.file-item .progress span { display: block; overflow: hidden; width: 0; height: 100%; -webit-transition: width 200ms linear; -moz-transition: width 200ms linear; -o-transition: width 200ms linear; -ms-transition: width 200ms linear; transition: width 200ms linear; -webkit-animation: progressmove 2s linear infinite; -moz-animation: progressmove 2s linear infinite; -o-animation: progressmove 2s linear infinite; -ms-animation: progressmove 2s linear infinite; animation: progressmove 2s linear infinite; -webkit-transform: translateZ(0); background-color: #79D28F; background-repeat: repeat-x; }
@-webkit-keyframes progressmove {  0% {
 background-position: 0 0;
}
 100% {
 background-position: 17px 0;
}
}
@-moz-keyframes progressmove {  0% {
 background-position: 0 0;
}
 100% {
 background-position: 17px 0;
}
}
@keyframes progressmove {  0% {
 background-position: 0 0;
}
 100% {
 background-position: 17px 0;
}
}
a.travis { position: relative; top: -4px; right: 15px; }

/*颜值担当*/
.guding { position: fixed; width: 100%; background-color: #FFF; z-index: 99; }
.tou { background-color: #f8f8f8; overflow: hidden; position: relative; border-bottom-width: 10px; border-bottom-style: solid; border-bottom-color: #eeeeee; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; }
.tou .zuo img{ margin-right: 10px; height: 65px; width: 65px; float: left; background-image: url(/UP/Admin/edit/tx1.png); border: 0px none #FFF; }
.tou .zuo p { font-size: 12px; display: block; height: 20px; line-height: 20px; }
.tou .zuo i { margin-right: 4px; }
.tou .you p { font-size: 12px; margin-bottom: 13px; height: 20px; line-height: 20px; text-align: right; }
.tou .you p s { font-size: 16px; color: #FFB800; text-decoration: none; font-family: Tahoma, Geneva, sans-serif; margin-right: 6px; }
.wenjian{ list-style-type: none; overflow: hidden; clear: both; background-color: #FFF; padding-top: 150px; padding-right: 10px; padding-left: 10px; }
.wenjian li { float: left; list-style-type: none; height: 145px; width: 100px; overflow: hidden; margin-right: 15px; margin-bottom: 15px; position: relative; text-align: center; display: block; }
.wenjian li a{ display: block; text-decoration: none; height: 100px; width: 100px; vertical-align: middle; }
.wenjian li a s {height: 100%; display: inline-block; vertical-align: middle; }
.wenjian li a img{ max-width: 100px; max-height: 100px; vertical-align: middle; cursor: pointer; }
.wenjian li a b{ height: 40px; width: 100%; line-height: 15px; font-size: 11px; display: block; font-weight: lighter; text-align: center; overflow: hidden; position: absolute; left: 0px; bottom: 0px;word-wrap: break-word; }
.wenjian li a:hover b{ color: #1E9FFF;  }
.wenjian li .s1,.wenjian li .s0{ position: absolute; top: -26px; right: -26px; font-weight: bold; line-height: 18px; text-align: right; height: 26px; width: 26px; background-image: url(images/shan.png); background-repeat: no-repeat; background-position: right top; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.wenjian li .s1 i,.wenjian li .s0 i{ font-size: 14px; color: #F30; }
.wenjian li:hover .s1,.wenjian li:hover .s0{ top: 0px; right: 0px; }
.kj { float: right;  }
.kj p{ padding-top: 5px; padding-bottom: 5px; }
.fh { border: 1px solid #dcdcdc; padding: 9px; display: inline-block; border-radius: 3px; float: left; margin-right: 10px; }
.fh:hvoer {color: #5FB878; }
@media screen and (max-width: 900px) {
.wenjian{ padding-top: 200px; }
.wenjian li .s1{ top: 0px; right: 0px; }
.kj{ text-align: center; float: none; clear: both; }
}
#ts em { color: #C30; float: right; margin-right: 10px; }

</style>
</head>

<body>

<?php   

    $c=$_GET["c"];
	$id=$_GET["id"];
    $file=$file.$_GET["file"];
    if ($file==""){$file="../../../../up/";}
	
    $zkb=10000;
	
//获取总文件尺寸
	function getDirSize($dir){ 
	  $handle = opendir($dir);
	  while (false!==($FolderOrFile = readdir($handle)))
	  {if($FolderOrFile != "." && $FolderOrFile != "..") 
	   {if(is_dir("$dir/$FolderOrFile"))
		{ $sizeResult += getDirSize("$dir/$FolderOrFile"); 
		}else{ $sizeResult += filesize("$dir/$FolderOrFile"); 
		}}}
	   closedir($handle);
	  return $sizeResult;
	  }
	 $ykb=getDirSize($file);
 
//遍历文件	
  function list_file($file){
        //1、首先先读取文件夹
        $temp=scandir($file);
        $c=$_GET["c"];
		$id=$_GET["id"];
        foreach($temp as $v){
            $a=$file.$v;
			$kzm = strrchr($v,'.');//取得扩展名
			$rq = filemtime($a);
			$rq= date("Y-m-d H:i:s",$rq);
            if($kzm==".jpg" or $kzm==".jpeg" or $kzm==".gif" or $kzm==".png" or $kzm==".ico" or $kzm==".bmp"){
			$tu=$a;
			}else{
			$tu="images/ico/".$kzm.".png";	
			}
			$i++;
		   
           if(is_dir($a)){//如果是文件夹则执行
             if($v=='.' || $v=='..'){continue;}
             $GLOBALS['wjj'] =$GLOBALS['wjj'] . "<li id='j".$i."'><a href='".$a."' alt='j".$i."' title='删除".$v."' class='s0'><i class='layui-icon'>&#x1006;</i></a><a href='?c=".$c."&id=".$id."&file=".$a."/'><s></s><img src='images/wjj.ico'><b>".$v."</b></a></li>"; 
			 
		   }else{
		     //如果是文件则执行
			 $GLOBALS['wj'] =$GLOBALS['wj'] ."<li id='w".$i."'><a href='".$a."' alt='w".$i."' title='删除".$v."' class='s1'><i class='layui-icon'>&#x1006;</i></a><a href='".$a."' title='".$v."' class='t1'><s></s><img lay-src='".$tu."' layer-src='".$tu."'><b>".$v."</b></a></li>";
           }
        }
        }
    
        list_file($file);
	
	
        //首先先读取文件夹
        $temp=scandir($file);
        
		//遍历文件夹
		   $ykb=$ykb/1024/1024;
           $skb=$zkb-$ykb;
		   $bfb=($ykb/$zkb)*100;
	?>


 
      
<div class="guding">
  <div class="tou">
       
    <a href="?c=<?php echo $c; ?>&id=<?php echo $id; ?>&file=" class="fh"><i class="layui-icon">&#xe65c;</i> 返回</a>
    <a href="?c=<?php echo $c; ?>&id=<?php echo $id; ?>&file=<?php echo $file; ?>" class="fh"><i class="layui-icon">&#xe669;</i> 刷新</a>
    <a href="<?php echo $file ?>" class="fh s2"><i class="layui-icon">&#xe654;</i>文件夹</a>

    <span id="filePicker" style=" margin-right: 10px; float: left; display: inline-block;">上传文件</span>
    
    <!--空间使用量-->
  <div class="kj">
    <p>总空间:<font color="#00CC99"><?php echo $zkb; ?>MB</font>  已用:<font color="#FF6600"><?php echo number_format($ykb, 2, '.', ''); ?>MB</font> 剩余:<font color="#0066FF"><?php echo number_format($skb, 2, '.', ''); ?>MB</font></p>
    <div class="layui-progress" lay-filter="kj" lay-showPercent="true">
      <div class="layui-progress-bar" lay-percent=""></div>
      </div>
  </div>
  </div>
    
  <div id="uploader" class="wu-example">
    <div class="statusBar" style="display:none;">
          <div class="progress" style="display: none;">
            <span class="text">0%</span><span class="percentage" style="width: 0%;"></span>
          </div>
    <div class="info">共0张(0B)，已上传0张</div>
  </div>
    
    
    <div id="ts"><a href="?">文件位置</a> <a href="?file=<?php echo $file ?>"> <?php echo trim(strrchr($file, '../../../'),'/'); ?></a> </div>
    
    <div class="queueList">
        <div id="dndArea" class="placeholder">
              <div id="filePicker" class="webuploader-container">
                <input type="file" name="file" class="webuploader-element-invisible" multiple accept="image/*">
                <label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);">
                </label>
              </div>
        </div>
    	<ul class="filelist"></ul>
    </div>
    
    <div class="statusBar" style="display:none;">
            <div class="btns">
                 <div class="uploadBtn state-pedding">开始上传</div>
            </div>
    </div>
    
  </div>
</div>

<ul class="wenjian" id="tu"> 
<?php echo $wjj; ?><?php echo $wj; ?>
</ul>


<script>

				
layui.use(['layer','element','flow'], function(){
  var $ = layui.jquery
  var layer = layui.layer
  ,flow = layui.flow
  ,element = layui.element;
   element.progress('kj', '<?php echo number_format($bfb, 2, '.', ''); ?>%')//已用空间
   
   var c=<?php echo $c ?>

   
    //延迟加载图片
   flow.lazyimg(); 

	var index = parent.layer.getFrameIndex(window.name);
	
		$('.t1').on('click', function (event) {
		event.preventDefault();	
		var tit=$(this).attr('title')
		var tid=$(this).attr('href')	
		
		if(c==0){
		//相册层
	    layer.photos({ photos: '.t1',anim: 5 });
		}
		
		if(c==1){
		//文件	
		parent.$('#<?php echo $id ?>').val(tid);
		parent.layer.close(index);
		parent.layer.msg('选择成功！',{icon: 1,time: 1000}, function(){});
		}
		if(c==2){
		//图片	
		parent.$('#uptu').attr('src',tid);
		parent.$('#t1').val(tid);
		parent.layer.close(index);
		parent.layer.msg('图片选择成功！',{icon: 1,time: 1000}, function(){});
		
	    //文件	
		//parent.$('#demo2').val(tid);
//		parent.layer.close(index);
//		parent.layer.msg('选择成功！',{icon: 1,time: 1000}, function(){});
//		layer.msg('请选择图片格式的文件',{icon: 2,time: 2000}, function(){});
		
		}
		
		});
       

	$('.t2').on('click', function (event) {
        event.preventDefault();
		var tit=$(this).attr('title')
		var tid=$(this).attr('href')		
	
		layer.open({
		type: 2,//0(信息框，默认)1(页面层)2(iframe层)3(加载层)4(tips层)。
		title:[tit],
		area: ['70%', '80%'],
		shift:2,//动画可选 0-6
		shade:[0.8, '#393D49'],//遮罩，shade: [0.8, '#393D49'],如果你不想显示遮罩，可以 false
		moveOut: true,//是否允许拖拽到窗外
		maxmin: false,//显示最大化最小化按钮
		scrollbar: false,//屏蔽父页滚动条
		content: [tid],//自动从href里获取url
		zIndex: layer.zIndex, success: function(layero){layer.setTop(layero);}});
	}); 
    
	//删除确认用date传递id 
  	$('.s0').on('click', function (event) {
        event.preventDefault();
		var tit=$(this).attr('title')
		var yid=$(this).attr('alt')
		var tid=[$(this).attr('href')]
			layer.confirm('你确定要删除吗？<br>'+tit, {
			icon: 3	,
			title:false,
			closeBtn: 0,//关闭按钮0不显示
			btn: ['确认','取消'] //按钮
			}, function(){
			$('#'+yid+'').hide();
			$.ajax({ url:"del.php?lx=rd&url="+tid}); 
			layer.msg('删除成功',{icon: 1,time: 600}, function(){
			//关闭后的操作
			});
			}, function(){
			layer.msg('已取消', {});
		});
		});	

	//删除确认用date传递id 
  	$('.s1').on('click', function (event) {
        event.preventDefault();
		var tit=$(this).attr('title')
		var yid=$(this).attr('alt')
		var tid=[$(this).attr('href')]
			layer.confirm('你确定要删除吗？<br>'+tit, {
			icon: 3	,
			title:false,
			closeBtn: 0,//关闭按钮0不显示
			btn: ['确认','取消'] //按钮
			}, function(){
			$('#'+yid+'').hide();
			$.ajax({ url:"del.php?lx=del&url="+tid}); 
			layer.msg('删除成功',{icon: 1,time: 600}, function(){
			//关闭后的操作
			});
			}, function(){
			layer.msg('已取消', {});
		});
		});	
	
		
	$('.s2').on('click', function (event) {
        event.preventDefault();
		var tid=[$(this).attr('href')]
		
		layer.prompt({title: ['请输入文件夹名称'],value: ''},function(val, index){
		  $.ajax({ url:"del.php?lx=md&url="+tid+val}); 
		  layer.msg('文件夹'+val+'已创建');
		  layer.close(index);
		  location.reload();
		});
		 
		});		
	
	
});
	
</script> 


<script src="js/webuploader.js"></script>
<script>
jQuery(function() {
    var $ = jQuery,    // just in case. Make sure it's not an other libaray.

        $wrap = $('#uploader'), // 图片容器
        $queue = $('<ul class="filelist"></ul>')
        .appendTo( $wrap.find('.queueList') ),// 状态栏，包括进度和控制按钮
        $statusBar = $wrap.find('.statusBar'), 
        $info = $statusBar.find('.info'),// 文件总体选择信息。
        $upload = $wrap.find('.uploadBtn'),// 上传按钮
        $placeHolder = $wrap.find('.placeholder'),  // 没选择文件之前的内容。
        $progress = $statusBar.find('.progress').hide(), // 总体进度条
        fileCount = 0, // 添加的文件数量
        fileSize = 0, // 添加的文件总大小
        ratio = window.devicePixelRatio || 1,  // 优化retina, 在retina下这个值是2
       
        thumbnailWidth = 110 * ratio, // 缩略图大小
        thumbnailHeight = 110 * ratio,
       
        state = 'pedding', // 可能有pedding, ready, uploading, confirm, done.

        // 所有文件的进度信息，key为file id
        percentages = {},
        supportTransition = (function(){
            var s = document.createElement('p').style,
                r = 'transition' in s ||
                      'WebkitTransition' in s ||
                      'MozTransition' in s ||
                      'msTransition' in s ||
                      'OTransition' in s;
            s = null;
            return r;
        })(),

// WebUploader实例
        uploader;
        if ( !WebUploader.Uploader.support() ) {
		layer.msg('本程序不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器', {});
        }

// 实例化-----------------------------------------------------------------------
    uploader = WebUploader.create({
		
        pick: {
            id: '#filePicker',
            label: '上传文件'
        },
        dnd: '#uploader .queueList',
        paste: document.body,
	 
        
			
//	-------------------------------------------------------------------------	
        swf: '../dist/Uploader.swf',      // swf文件路径
        disableGlobalDnd: true,
        chunked: true,
        server: 'server/fileupload.php?file=<?php echo $file ?>/',  // 后端处理程序的路径
        fileNumLimit: 20,//最多上传图片数
       // fileSizeLimit: 5 * 1024 * 1024,    // 200 M
        fileSingleSizeLimit: 10 * 1024 * 1024,    // 50 M
		fileSizeLimit: 1000* 1024 * 1024,
		auto: false, // 自动上传。

//允许的文件格式仅图片
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png,txt,doc,docx,xls,xlsx,ppt,pptx,txt,swf,mp4,html,rar,zip',
		   // mimeTypes: 'image/*'//如果开发其它格式则取消这句
        },	
				
//--------缩略图-------------------------------------------------------	
	
		thumb:{
		width: 110,
		height: 110,
		quality: 90,// 图片质量，只有type为`image/jpeg`的时候才有效。
		allowMagnify: false,// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
		crop: true,// 是否允许裁剪。
		type: 'image/jpeg'//图片格式。
	},
//--------原图处理-------------------------------------------------------		
		compress:{
		width: 1920,//超出此宽度则裁剪，单位px
		height:1080,//超出此宽度则裁剪
		quality: 98,  // 图片质量，只有type为`image/jpeg`的时候才有效。
		allowMagnify: false, // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
		crop: false, // 是否允许裁剪。
		preserveHeaders: false,// 是否保留头部meta信息。
		noCompressIfLarger: true, // 如果发现压缩后文件大小比原来还大，则使用原来图片
		type: 'image/jpeg',// 为空的话则保留原有图片格式。
		compressSize: 0,// 单位字节，如果图片大小小于此值，不会采用压缩
	},
		//提前准备下一张图片
		 prepareNextFile:true
		});
 
// 继续添加文件按钮，
      uploader.addButton({
			id: '#filePicker2',
			label: '继续添加'
		});

// 当有文件添加进来时执行，负责view的创建
    function addFile( file ) {
		$('#ts').hide();//隐藏提示
        var $li = $( '<li id="' + file.id + '">' +
                '<p class="title">' + file.name + '</p>' +
                '<p class="imgWrap"></p>'+
                '<p class="progress"><span></span></p>' +
                '</li>' ),

            $btns = $('<div class="file-panel">' +
                '<span class="cancel">删除</span>' +
                '<span class="rotateRight">向右旋转</span>' +
                '<span class="rotateLeft">向左旋转</span></div>').appendTo( $li ),
            $prgress = $li.find('p.progress span'),
            $wrap = $li.find( 'p.imgWrap' ),
            $info = $('<p class="error">错误</p>'),

            showError = function( code ) {
                switch( code ) {
                    case 'exceed_size':
                        text = '文件大小超出';
                        break;
                    case 'interrupt':
                        text = '上传暂停';
                        break;
                    default:
                        text = '上传失败，请重试';
                        break;
                }
                $info.text( text ).appendTo( $li );
            };
        if ( file.getStatus() === 'invalid' ) {
            showError( file.statusText );
        } else {
            // @todo lazyload
            $wrap.text( '预览中' );
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $wrap.text( '' );//不能预览
                    return;
                }

                var img = $('<img src="'+src+'">');
                $wrap.empty().append( img );
            }, thumbnailWidth, thumbnailHeight );

            percentages[ file.id ] = [ file.size, 0 ];
            file.rotation = 0;
        }

        file.on('statuschange', function( cur, prev ) {
			
            if ( prev === 'progress' ) {
                $prgress.hide().width(0);

            } else if ( prev === 'queued' ) {
                $li.off( 'mouseenter mouseleave' );
                $btns.remove();
            }

            // 成功
            if ( cur === 'error' || cur === 'invalid' ) {
                console.log( file.statusText );
                showError( file.statusText );
                percentages[ file.id ][ 1 ] = 1;
            } else if ( cur === 'interrupt' ) {
                showError( 'interrupt' );
            } else if ( cur === 'queued' ) {
                percentages[ file.id ][ 1 ] = 0;
            } else if ( cur === 'progress' ) {
                $info.remove();
                $prgress.css('display', 'block');
            } else if ( cur === 'complete' ) {
                $li.append( '<span class="success"></span>' );
            }

            $li.removeClass( 'state-' + prev ).addClass( 'state-' + cur );
        });

        $li.on( 'mouseenter', function() {
            $btns.stop().animate({height: 30});
        });

        $li.on( 'mouseleave', function() {
            $btns.stop().animate({height: 0});
        });

        $btns.on( 'click', 'span', function() {
            var index = $(this).index(),
                deg;

            switch ( index ) {
                case 0:
                    uploader.removeFile( file );
                    return;

                case 1:
                    file.rotation += 90;
                    break;

                case 2:
                    file.rotation -= 90;
                    break;
            }

            if ( supportTransition ) {
                deg = 'rotate(' + file.rotation + 'deg)';
                $wrap.css({
                    '-webkit-transform': deg,
                    '-mos-transform': deg,
                    '-o-transform': deg,
                    'transform': deg
                });
            } else {
                $wrap.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')');

            }


        });

        $li.appendTo( $queue );
    }

    // 负责view的销毁
    function removeFile( file ) {
        var $li = $('#'+file.id);
        delete percentages[ file.id ];
        updateTotalProgress();
        $li.off().find('.file-panel').off().end().remove();
		
    }

    function updateTotalProgress() {
        var loaded = 0,
            total = 0,
            spans = $progress.children(),
            percent;
          
        $.each( percentages, function( k, v ) {
            total += v[ 0 ];
            loaded += v[ 0 ] * v[ 1 ];
        } );

        percent = total ? loaded / total : 0;
        
        spans.eq( 0 ).text( Math.round( percent * 100 ) + '%' );
        spans.eq( 1 ).css( 'width', Math.round( percent * 100 ) + '%' );
        updateStatus();
    }

    function updateStatus() {
        var text = '', stats;

        if ( state === 'ready' ) {
            text = '选中' + fileCount + '张图片，共' +
                    WebUploader.formatSize( fileSize ) + '。';
        } else if ( state === 'confirm' ) {
            stats = uploader.getStats();
            if ( stats.uploadFailNum ) {
                text = '已成功上传' + stats.successNum+ '张照片，'+
                    stats.uploadFailNum + '张照片上传失败！'
            }

        } else {
            stats = uploader.getStats();
            text = '共' + fileCount + '张(' +
                    WebUploader.formatSize( fileSize )  +
                    ')，已上传' + stats.successNum + '张';

            if ( stats.uploadFailNum ) {
                text += '，失败' + stats.uploadFailNum + '张';
            }
        }

        $info.html( text );
    }

    function setState( val ) {
        var file, stats;

        if ( val === state ) {
            return;
        }

        $upload.removeClass( 'state-' + state );
        $upload.addClass( 'state-' + val );
        state = val;

        switch ( state ) {
            case 'pedding':
                $placeHolder.removeClass( 'element-invisible' );
                $queue.parent().removeClass('filled');
                $queue.hide();
                $statusBar.addClass( 'element-invisible' );
                uploader.refresh();
                break;

            case 'ready':
                $placeHolder.addClass( 'element-invisible' );
                $( '#filePicker2' ).removeClass( 'element-invisible');
                $queue.parent().addClass('filled');
                $queue.show();
                $statusBar.removeClass('element-invisible');
                uploader.refresh();
                break;

            case 'uploading':
                $( '#filePicker2' ).addClass( 'element-invisible' );
                $progress.show();
                $upload.text( '暂停上传' );
                break;

            case 'paused':
                $progress.show();
                $upload.text( '继续上传' );
                break;

            case 'confirm':
                $progress.hide();
                $upload.text( '开始上传' ).addClass( 'disabled' );

                stats = uploader.getStats();
                if ( stats.successNum && !stats.uploadFailNum ) {
                    setState( 'finish' );
                    return;
                }
                break;
            case 'finish':
                stats = uploader.getStats();
                if ( stats.successNum ) {
                    //alert( '上传成功' );
					$('#ts').show();
					location.reload();
                } else {
                    // 没有成功的图片，重设
                    state = 'done';
                    location.reload();
                }
                break;
        }

        updateStatus();
    }

    uploader.onUploadProgress = function( file, percentage ) {
        var $li = $('#'+file.id),
            $percent = $li.find('.progress span');

        $percent.css( 'width', percentage * 100 + '%' );
        percentages[ file.id ][ 1 ] = percentage;
        updateTotalProgress();
    };

    uploader.onFileQueued = function( file ) {
        fileCount++;
        fileSize += file.size;

        if ( fileCount === 1 ) {
            $placeHolder.addClass( 'element-invisible' );
            $statusBar.show();
        }

        addFile( file );
        setState( 'ready' );
        updateTotalProgress();
    };

    uploader.onFileDequeued = function( file ) {
        fileCount--;
        fileSize -= file.size;

        if ( !fileCount ) {
            setState( 'pedding' );
        }

        removeFile( file );
        updateTotalProgress();

    };

    uploader.on( 'all', function( type ) {
        var stats;
        switch( type ) {
            case 'uploadFinished':
                setState( 'confirm' );
                break;

            case 'startUpload':
                setState( 'uploading' );
                break;

            case 'stopUpload':
                setState( 'paused' );
                break;

        }
    });

    uploader.onError = function( code ) {
        //alert( 'Eroor:最多上传10个文件，且不能重复 ' + code );
		layer.alert('文件没有上传成功！', {title:false,closeBtn: 0,icon: 5});
    };

    $upload.on('click', function() {
        if ( $(this).hasClass( 'disabled' ) ) {
            return false;
        }

        if ( state === 'ready' ) {
            uploader.upload();
        } else if ( state === 'paused' ) {
            uploader.upload();
        } else if ( state === 'uploading' ) {
            uploader.stop();
        }
    });

    $info.on( 'click', '.retry', function() {
        uploader.retry();
    } );

    $info.on( 'click', '.ignore', function() {
        alert( 'todo' );
    } );

    $upload.addClass( 'state-' + state );
    updateTotalProgress();
});

</script>
    
</body>
</html>
