{extend name="Public/base" /}
{block name="main"}
    <fieldset class="layui-elem-field">
        <legend>客户底片管理 - 文件上传</legend>
        <div class="layui-field-box">
                
                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color:red">*</span>目录名称</label>
                    <div class="layui-input-block">
                        <button id="browse">选择文件</button>
                        
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button id="start_upload">开始上传</button>
                        <span id="percent">最大大小：{$size}</span>
                        <div id="filelist">
                        </div>
                    </div>
                </div>
        </div>
    </fieldset>
{/block}

{block name="myScript"}
<script src="__PUBLIC__/js/plupload.full.min.js"></script>
        <script>
            
            
        //实例化一个plupload上传对象
    var uploader = new plupload.Uploader({
        browse_button : 'browse', //触发文件选择对话框的按钮，为那个元素id
        url : 'uploadFile.html?uid={$uid}&parent_folder={:urlencode($parentFolder)}', //服务器端的上传页面地址
        flash_swf_url : '__PUBLIC__/js/Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数
        silverlight_xap_url : '__PUBLIC__/js/Moxie.xap', //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
        filters: {
            mime_types : [ //只允许上传图片和zip文件
              { title : "Image files", extensions : "jpg,gif,png" }, 
              { title : "Zip files", extensions : "zip" },
              { title : "Rar files", extensions : "rar" },
              { title : "Jpeg files", extensions : "jpeg" }
            ],
            max_file_size:'{$size}',
            prevent_duplicates : true //不允许选取重复文件
          }
    });    

    //在实例对象上调用init()方法进行初始化
    uploader.init();

    //绑定各种事件，并在事件监听函数中做你想做的事
    uploader.bind('FilesAdded',function(uploader,files){
        //每个事件监听函数都会传入一些很有用的参数，
        //我们可以利用这些参数提供的信息来做比如更新UI，提示上传进度等操作
        for(var i = 0, len = files.length; i<len; i++){
            //alert(JSON.stringify(files[i]));
            var file_name = files[i].name; //文件名
            //构造html来更新UI
            var html = '<li id="file-' + files[i].id +'"><p class="file-name">' + file_name + '</p><p class="progress"></p></li>';
            $(html).appendTo('#filelist');
        }
        
    });
    uploader.bind('UploadProgress',function(uploader,file){
        //每个事件监听函数都会传入一些很有用的参数，
        //我们可以利用这些参数提供的信息来做比如更新UI，提示上传进度等操作
        $('#percent').html(file.percent + '%');//控制进度条
    });
    uploader.bind('UploadComplete',function(uploader,file){
        //每个事件监听函数都会传入一些很有用的参数，
        //我们可以利用这些参数提供的信息来做比如更新UI，提示上传进度等操作
        //location.reload();
        parent.location.reload();
    });
    //......
    //......

    //最后给"开始上传"按钮注册事件
    $("#start_upload").on('click',function(){
        uploader.start();
        
    })
            
            
            
            layui.use('form', function(){
                var form = layui.form();
                form.on('submit(admin-form)', function(data){
                    $.ajax({
                        type: "POST",
                        url: 'folderadd.html',
                        data: data.field,
                        success: function(msg){
                            if( msg.code == 1 ){
                                parent.location.reload();
                            }else{
                                parent.layer.msg(msg.msg, {
                                    icon: 5,
                                    shade: [0.6, '#393D49'],
                                    time:1500
                                });
                            }
                        }
                    });
                    return false;
                });

            });
        </script>
        
{/block}