<?php
session_start();
require_once "../init.php";
require_once "../authority.inc.php";
$sql = "SELECT * from goods where id = 1";
$results = $mysqli->query("SELECT * from products where IDProduct = 1");
$detail = $results->fetch_array();


$pics = json_decode($detail['pics'], true);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>商品多图片上传</title>

        <style type="text/css">
            a{cursor:pointer;}
            body{background: #fff none repeat scroll 0 0; color: #333; font: 12px/1.5 "Microsoft YaHei","Helvetica Neue",Helvetica,STHeiTi,sans-serif; background-position: left top; background-repeat: repeat; background-attachment: scroll;}
            .clearfix:after{visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0}
            *:first-child+html .clearfix{zoom:1}
            ul,li{list-style: none;padding:0;margin:0}

            /**********上传样式***********/

            .progress{position:relative;padding: 1px; border-radius:3px; margin:30px 0 0 0;}
            .bar{background-color: green; display:block; width:0%; height:20px; border-radius:3px;}
            .percent{position:absolute; height:20px; display:inline-block;top:3px; left:2%; color:#fff}
            .progress{
                height: 100px;
                padding: 30px 0 0;
                width:100px;
                border-radius: 0;
            }
            .btn{-webkit-border-radius:3px; -moz-border-radius:3px; -ms-border-radius:3px; -o-border-radius:3px; border-radius:3px;
                 background-color:#ff8400; color:#fff; display:inline-block; height:28px; line-height:28px; text-align:center; padding:0 12px; 
                 transition:background-color .2s linear 0s; border:0; cursor:pointer;text-decoration: none}
            .btn:hover{background-color:#e95a00; text-decoration:none}
            .photos_area .item {
                float: left;
                margin: 0 10px 10px 0;
                position: relative;
            }
            .photos_area .item{position: relative;float:left;margin:0 10px 10px 0;}
            .photos_area .item img{border: 1px solid #cdcdcd;}
            .photos_area .operate{background: rgba(33, 33, 33, 0.7) none repeat scroll 0 0; bottom: 0; padding:5px 0; left: 0; position: absolute; width: 102px; z-index: 5; line-height: 21px; text-align: center;}
            .photos_area .operate i{cursor: pointer; display: inline-block; font-size: 0; height: 12px; line-height: 0; margin: 0 5px; overflow: hidden; width: 12px; background: url("images/icon_sucaihuo.png") no-repeat scroll 0 0;}
            .photos_area .operate .toright{background-position: -13px -13px; position: relative;top:1px;}
            .photos_area .operate .toleft{background-position: 0 -13px; position: relative;top:1px;}
            .photos_area .operate .del{background-position: -13px 0; position: relative;top:0px;}
            .photos_area .preview{background-color: #fff; font-family: arial; line-height: 90px; text-align: center; z-index: 4; left: 0; position: absolute; top: 0; height: 90px; overflow: hidden; width: 90px;}
            td{padding: 20px 0}
        </style>
    </head>
    <body>

        <form action="detail_post.php" method="POST" id="form" >
            <table class="table table_detail" style="width:800px;" align="center">
                <tbody>
                    <tr>
                        <td class="td_left">商品标题:</td>
                        <td>
                            <input name="title" type="text" class="common_txt"  value="<?php echo $detail['title']; ?>" autocomplete="off" style="border:1px solid #ccc;padding: 5px;width:400px"/>
                        </td>
                    </tr>
                    <tr id="logo_area_tr" class='logo_area_tr'>
                        <td class="td_left"><a class="btn" id="logo_upload_btn" href="javascript:;" >上传商品图片</a></td>
                        <td>

                            <div id="logo_upload_area" style='width:80%'>
                                <div id='photos_area' class="photos_area clearfix">
                                    <?php
                                    if (isset($pics)) {
                                        foreach ($pics as $v) {
                                            ?>
                                            <div class='item'>
                                                <input type='hidden' name='pics[]' value='<?php echo $v; ?>'/>
                                                <img src='<?php echo $v; ?>'  width='100px' height='100px'/>
                                                <div class='operate'><i class='toleft'>左移</i><i class='toright'>右移</i><i class='del'>删除</i></div>
                                            </div>
    <?php }
} ?>
                                </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"></td>
                        <td>
                            <button class="btn btn-info btn-sm" type="submit" id="btn_submit">
                                <i class="icon-ok bigger-110 "></i>
                                保 存
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </form>

        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="plupload/plupload.full.min.js"></script>
        <script type="text/javascript">

            var uploader = new plupload.Uploader({
                runtimes: 'gears,html5,html4,silverlight,flash',
                browse_button: 'logo_upload_btn',
                url: "ajax.php",
                flash_swf_url: 'plupload/Moxie.swf',
                silverlight_xap_url: 'plupload/Moxie.xap',
                filters: {
                    max_file_size: '25mb',
                    mime_types: [
                        {title: "files", extensions: "jpg,png,gif,jpeg"}
                    ]
                },
                multi_selection: true,
                init: {
                    FilesAdded: function(up, files) {
                        $("#btn_submit").attr("disabled", "disabled").addClass("disabled").val("正在上传...");
                        var item = '';
                        plupload.each(files, function(file) { //遍历文件
                            item += "<div class='item' id='" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>0%</span></div></div>";
                        });
                        $("#photos_area").append(item);
                        uploader.start();
                    },
                    UploadProgress: function(up, file) { //上传中，显示进度条 
                        var percent = file.percent;
                        $("#" + file.id).find('.bar').css({"width": percent + "%"});
                        $("#" + file.id).find(".percent").text(percent + "%");
                    },
                    FileUploaded: function(up, file, info) {
                        var data = eval("(" + info.response + ")");
                        $("#" + file.id).html("<input type=hidden name='pics[]' value='" + data.src + "'><img src='" + data.src + "' alt='" + data.name + "' width='100px' height='100px'>\n\
            <div class='operate'><i class='toleft'>左移</i><i class='toright'>右移</i><i class='del'>删除</i></div>")

                        $("#btn_submit").removeAttr("disabled").removeClass("disabled").val("提 交");
                        if (data.error != 0) {
                            alert(data.error);
                        }
                    },
                    Error: function(up, err) {
                        if (err.code == -601) {
                            alert("请上传jpg,png,gif,jpeg,zip或rar！");
                            $("#btn_submit").removeAttr("disabled").removeClass("disabled").val("提 交");
                        }
                    }
                }
            });
            uploader.init();
            //左右切换和删除图片
            $(function() {
                $(".toleft").live("click", function() {
                    var item = $(this).parent().parent(".item");
                    var item_left = item.prev(".item");
                    if ($("#photos_area").children(".item").length >= 2) {
                        if (item_left.length == 0) {
                            item.insertAfter($("#photos_area").children(".item:last"));
                        } else {
                            item.insertBefore(item_left);
                        }
                    }

                })
                $(".toright").live("click", function() {
                    var item = $(this).parent().parent(".item");
                    var item_right = item.next(".item");
                    if ($("#photos_area").children(".item").length >= 2) {
                        if (item_right.length == 0) {
                            item.insertBefore($("#photos_area").children(".item:first"));
                        } else {
                            item.insertAfter(item_right);
                        }
                    }
                })
                $(".del").live("click", function() {
                    $(this).parent().parent(".item").remove();
                })
            })
        </script>
        <!-- 以下是统计及其他信息，与演示无关，不必理会 -->

        <style type="text/css">
            .vad { margin: 120px 0 5px; font-family: Consolas,arial,宋体,sans-serif; text-align:center;}
            .vad a { display: inline-block; height: 36px; line-height: 36px; margin: 0 5px; padding: 0 50px; font-size: 14px; text-align:center; color:#eee; text-decoration: none; background-color: #222;}
            .vad a:hover { color: #fff; background-color: #000;}
            .thead { width: 728px; height: 90px; margin: 0 auto; border-bottom: 40px solid #fff;}
        </style>