<style>
    form div{
        margin-top:5px;
    }
    .g{
        color:green;
        font-weight:bold;
    }
    #div-result .g{
        margin-right:20px;
    }
</style>



<script type="text/javascript">
    $(document).ready(function(){ 

        $('#fm .btn-file').click(function(){
            $('#xFile').click();
        });        
        $('#fm').on('change','#xFile',function(target){
            var f = this.files[0];
            var fn = f.name;
            var sz = Math.ceil(f.size/1024);   
            $('#fn').val(fn+" ("+sz+"KB)");
            if(sz>5000){
                $('#xFile').val('');
                $('#fn').val('');
                toastr.error(
                    "文件不能大于5M",
                    "操作错误：",
                    {timeOut: 800, positionClass: "toast-center-center"}
                );
                return  false;                
            };    
　　        var ext = fn.substring(fn.lastIndexOf(".")+1).toLowerCase();
　　        if(ext !="zip"){
                $('#xFile').val('');
                $('#fn').val('');
                toastr.error(
                    "请选择zip格式文件上传",
                    "操作错误：",
                    {timeOut: 800, positionClass: "toast-center-center"}
                );
                return  false; 　　　　       
　　        };
            return false;
        });    

        
        $('.btn-upload').click(function(){
            if ($.isEmpty($('#fn').val())){
                toastr.error(
                    "请先选择要上传的zip文件",
                    "操作错误：",
                    {timeOut: 800, positionClass: "toast-center-center"}
                );
                return false;
            };
            if ($.isEmpty($('#pos').val())){
                toastr.error(
                    "请先指定数据格式",
                    "操作错误：",
                    {timeOut: 800, positionClass: "toast-center-center"}
                );
                return false;
            };
            var data=new FormData(); 
            var f = document.getElementById('xFile').files[0];                
            data.append("files",  f);
            data.append('password', $('#pwd').val());
            data.append('encode', $('#encode').val());
            data.append('pos',$('#pos').val());
            $.ajax({
                url: '/bottlecap/ajax/zip/upload/',
                type: 'POST',
                data:data,
                processData: false, //这个必须有，不然会报错
                contentType: false, //这个必须有，不然会报错
                success:function(data){                   
                    if(data.e){
                        toastr.error(
                            data.e,
                            "操作错误：",
                            {timeOut: 1200, positionClass: "toast-center-center"}
                        );    
                    }else{                        
                        var html='';
                        var fs=data.result['txts'];
                        for (var i in fs){
                            var f=fs[i];                            
                            html=html+"<tr><td>"+f.name+"</td><td>"+f.lines+"</td><td>"+f.cnt+"</td><td>"+f.err+"</td></tr>";                        
                        };
                        $('#div-result').html(
                            'txt文件个数:<span class="g">'+data.result.tt_txts+'</span>'+
                            '总行数:<span class="g">'+data.result.tt_lns+'</span>'+
                            '总计写入记录数:<span class="g">'+data.result.tt_cnt+'</span>'
                        );
                        $('#dlg-result tbody').html(html); 
                        $('#dlg-result').modal("show");   
                    }
                    return false;    
                },
                error:function(){
                    alert('网络通讯错误');
                    return false;
                }
            });   
        });

    })
</script>

<ol class="breadcrumb">
        <li>瓶盖码数据管理</li> 
        <li>绑定数据上传</li>            
</ol>


<div class="x_panel">
    <div id='fm' >                    
            <div style='font-weight:bold'>瓶盖码绑定数据上传流程及文件格式要求： </div>
            <div style='color:black;margin-top:10px;'>
                <div>1.txt文件数据,每行至少包含盖内码和盖外码<span class='g'>两列</span>,之间用<span class='g'>逗号</span>分隔.</div>
                <div>2.为减少文件尺寸和网络流量,内外码都可以只写码值,前面的扫码链接 http://tjl.me/?t= 可不写入文本.</div>
                <div>3.windows环境下生成的txt,一般为ANSI编码.如果不能确定是何种编码,txt文件内容不要包含中文.</div>
                <div>4.做好的txt文本只有压缩成zip格式文件后才可以上传.</div>
                <div>5.可以将多个txt文本压缩到zip文件内.</div>
                <div>6.要上传的<span class='g'>zip</span>文件大小不能超过<span class='g'>5MB</span>.</div>  
                <div>7.文件上传前,先指定<span class='g'>数据格式</span>(内外码位置).</div>
            </div>
            <br/>
            <div class="form-group" >
                <label class="col-sm-1 control-label">zip文件名:</label>                            
                <div class="col-sm-8 input-group">
                    <input id='fn' type="text" disabled="disabled" class="form-control" placeholder="请选择要上传的zip文件" />
                    <span class='input-group-btn'>
                        <button type="button" class='btn btn-primary btn-file'>
                            <span class='glyphicon glyphicon-folder-open'></span>
                        </button>
                    </span>     
                </div>                        
            </div> 
            <div class="form-group" >  
                <label class="col-sm-1 control-label ">数据格式:</label>
                <div class="col-sm-8 input-group">
                    <select id='pos' class='form-control'>
                        <option value=''>----------------</option>
                        <option value='1'>第1列内码,第2列外码</option>
                        <option value='2'>第1列外码,第2列内码</option>
                    </select>
                </div> 
                <label class="col-sm-1 control-label ">zip文件密码:</label>
                <div class="col-sm-8 input-group">
                    <input type='text' id="pwd" class='form-control' placeholder="无密码" />
                </div> 

                <label class="col-sm-1 control-label ">txt文件编码:</label>
                <div class="col-sm-8 input-group">
                    <select id='encode' class='form-control'>
                        <option value='gbk'>ANSI</option>
                        <option value='utf8'>UTF-8</option>
                    </select>                    
                </div>  
            </div>  
            
            <input type="file" id="xFile" accept=".zip"  style="position:absolute;clip:rect(0 0 0 0);" />     
            
    </div>    

    <div class="form-group">
        <div class='col-sm-9' style="padding-right:0px;margin-right:0px;">
            <button class='btn btn-primary btn-upload pull-right'>上传zip数据文件</button>
        </div>
    </div>  
    
</div>





<!--上传结果显示对话框-->
<div class="modal fade bs-example-modal-lg" id='dlg-result' tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="bgModalLabel">上传文件处理结果：</h4>
            </div>
            
            <div class="modal-body">
                <div id='div-result' style='margin-bottom:20px;'></div>
                <div style='width:100%'>
                    <table style="width:100%">
                    <thead><th>文件名</th><th>文本行数</th><th>实际写入</th><th>报错信息</th></thead>
                    <tbody></tbody>
                    </table>
                </div>
            </div>

            <div class="modal-footer">                
                <button type="button" class="btn btn-default" data-dismiss="modal">确定</button> 
            </div>
        </div>
    </div>
</div>

