<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <title></title>
    <link href="http://admin.vlcms.com/Public/icon.ico" type="image/x-icon" rel="shortcut icon">
    <link rel="stylesheet" type="text/css" href="__CSS__/base.css" media="all">
    <link rel="stylesheet" type="text/css" href="__CSS__/common.css" media="all">
    <link rel="stylesheet" type="text/css" href="__CSS__/module.css">
    <link rel="stylesheet" type="text/css" href="__CSS__/style.css" media="all">
    <link rel="stylesheet" type="text/css" href="__CSS__/default_color.css" media="all">
    <script type="text/javascript" src="__STATIC__/jquery-2.0.3.min.js"></script>
    <script src="__STATIC__/layer/layer.js" type="text/javascript"></script>
</head>
<style>
    html {
        min-width:100%;
    }
    body {
        padding: 0px;
    }
    .hide{
        display: none !important;
    }
</style>
<body>
<div id="main" class="main" style="min-height: 342px;margin-top: 20px;padding-left: 50px;">
    <table border="0" cellspacing="0" cellpadding="0">
        <tr style="padding: 10px;height: 50px;">
            <td class="l">文件选择: </td>
            <td >
                <input type="file" id="fileinput" name="file" accept="image/*">
            </td>
            <td style="color: #777;font-size: 12px;">仅能添加一张凭证,重复添加将覆盖</td>
        </tr>
    </table>
    <div class="jssearch search_list fl cf">
        <div class="input-list">
            <div class="sch-btn uploadfile" style="width: 100px;padding: 5px;">确认添加</div>
            <div id="delVoucher" class="sch-btn hide" style="width: 100px;padding: 5px;background-color: red;">删除凭证</div>
        </div>
    </div>
    <div style="display: block;clear: both;">
        <img id="voucher" src="" class="hide" style="width: auto;height: 350px;margin: auto;">
    </div>
</div>


<script>
    var id = {$id};
    $(function(){
        $(".uploadfile").on("click",function(){
            var acceptedTypes = ['image/png','image/jpeg','image/jpg','image/gif'];
            var type = document.getElementById('fileinput').files[0].type;
            if (acceptedTypes.indexOf(type) === -1) {
                layer.msg("只允许图片格式文件");
                return false;
            }
            var formData = new FormData();
            formData.append("id",id);
            formData.append("file", document.getElementById("fileinput").files[0]);

            var index = layer.load();
            $.ajax({
                url:"{:U('saveVoucher')}",
                type:"post",
                data:formData,
                processData:false,
                contentType:false,
                success:function(data){
                    layer.close(index);  
                    if(data.status == 1){
                        //file_path\
                        layer.msg("上传成功");
                        $('#voucher').attr("src",data.file_path).removeClass("hide");
                        $('#delVoucher').removeClass("hide");
                        $("#fileinput").val('');
                    }else{
                        layer.alert(data.info);
                    }
                },
                error:function(e){
                    layer.alert("网络错误");
                }
            });        
        })
        $("#delVoucher").on("click",function(){
            var index = layer.load();
            var formData = new FormData();
            formData.append("id",id);
            $.ajax({
                url:"{:U('delVoucher')}",
                type:"post",
                data:formData,
                processData:false,
                contentType:false,
                success:function(data){
                    layer.close(index);  
                    if(data.status == 1){
                        //file_path\
                        layer.msg("删除成功");
                        $('#voucher').attr("src",'').addClass("hide");
                        $('#delVoucher').addClass("hide");
                        $("#fileinput").val('');
                    }else{
                        layer.alert(data.info);
                    }
                },
                error:function(e){
                    layer.alert("网络错误");
                }
            });        
        })

    });
</script>

</body>
</html>