xiaoben-as2-php/protected/views/notification/edit.php

<style>
    .form {
        font-size: 14px;
        font-weight: bold;
        color: #999999;
        margin: 20px;
    }

    .form-item {
        margin-bottom: 20px;
        white-space: nowrap;
    }

    .form-item-label {
        width: 110px;
        text-align: right;
        display: inline-block;
        margin-right: 5px;
        vertical-align: top;
    }

    .form-item-input {
        width: 230px;
        height: 28px;
        text-indent: 5px;
        border: 1px solid #aeaeae;
        border-radius: 3px;
        outline: none;
        box-sizing: border-box;
    }

    .form-item-con > div {
        margin-bottom: 5px;
    }
    .form-item-con .checkbox {
        display: inline-block;
        margin-right: 5px;
    }

    .form .date {
        display: inline-block;
        width: 100px;

    }

    .form .date span {
        color: #333333;
    }

    .form .classes {
        color: #666;

    }

    button {
        border: none;
        background: #2977ff;
        width: 111px;
        height: 36px;
        border-radius: 3px;
        font-size: 14px;
        color: #fff;
        outline: none;
        cursor: pointer;
    }
    button.save {
        width:100px;
    }

    .confirmbox .confirmbox-btns {
        margin-top: 40px;
    }
    .confirmbox .confirmbox-btns button {
        margin-right: 10px;
    }

    .tooltip1:hover .tooltip-con{
        display: block;
    }

    .classes div{
        display: inline-block;
        vertical-align: top;
        max-width: 500px;
    }
    .classes span{
        word-break: keep-all;
        display: inline-block;
    }

    .class-box>p{
        margin-bottom: 10px;
    }
    .class-box>ul{
        width: 500px;
        height: 200px;
        padding: 10px 20px;
        background-color: #FAFAFA;
        box-sizing: border-box;
        border:1px solid #ddd;
    }
    .class-box>ul>li{
        float: left;
        margin-right: 15px;
        margin-bottom: 10px;
        cursor: pointer;
    }
    .class-box>ul>li>img{
        vertical-align: middle;
        margin-left: 3px;
    }
    .icon-change{
        margin: 0 37px;
        margin-top: 110px;
    }
    .red-tips{
        color: red;
    }
    button.save {
        height: 40px;
    }

    .selected-box li{
        color:#2977ff;
    }
    textarea{
        width:650px;
        height:320px;
    }
    /*修改样式结束*/

    .upload{
        display: inline-block;
    }
    .upload-btn{
        display: inline-block;
    }
    #file-upload-1{border:0;padding-left:0;}
</style>

<div class="main-content-inner">

    <div class="page-content">
        <form action="<?php echo $this->createUrl('notification/edit')?>" class="form" method="post">
            <div class="form-item">
                <label class="form-item-label">
                    标题
                </label>
                <input type="text" name="title" class="form-item-input" placeholder="不超过20个字符" value="<?php if(isset($title)) echo $title;?>">
            </div>
            <div class="form-item">
                <label class="form-item-label">
                    通知内容
                </label>
                <textarea name="content" id="content"><?php if(isset($content)) echo $content;?></textarea>
            </div>
            <div class="form-item">
                <label class="form-item-label">
                    添加附件
                </label>

                <div class="upload">
                    <span class="red-tips">注：最多可上传3个文件，支持Word、Excel、PDF格式，单个文件大小不得超过10M，选择文件后需点击【上传】按钮</span>
                    <div>
                        <table>
                            <tr>
                                <td><input type="file" class="form-item-input" name="file-upload-1" id="file-upload-1"></td>
                                <td><button class="upload-btn " style="width:70px;height:25px;margin-left:10px;font-size:12px;">上传</button></td>
                            </tr>
                            <tr>
                                <td colspan="2" class="file_list">
                                    <?php
                                    if(isset($file_list) && $file_list){
                                        foreach ($file_list as $item){
                                            echo '<p url="'.$item['url'].'" name="'.$item['file_name'].'">'.$item['file_name'].'   <span class="red-tips del-file">删除</span></p>';
                                        }
                                    }
                                    ?>
                                </td>
                            </tr>
                        </table>

                    </div>

                </div>

            </div>
            <div class="form-item">
                <label class="form-item-label">
                </label>
                <button type="button" class="save" id="save">保存</button>
                <input type="hidden" name="eid" value="<?php if(isset($id)) echo $id;?>">
                <input type="hidden" name="files" value="<?php if(isset($file_list)) echo json_encode($file_list)?>">
            </div>
        </form>
    </div>
</div>
<script src="/js/jquery.ajaxfileupload.js"></script>
<script>
    $(function(){

        $('#save').click(function(){
            if($('input[name=title]').val()==''){
                layer.msg('请输入标题');
                return false;
            }
            if($('input[name=title]').val().length>20){
                layer.msg('标题最多不超过20个字符');
                return false;
            }

            if($('#content').val()==''){
                layer.msg('请输入通知内容');
                return false;
            }
            var fileArr=[];
            $fileListLength=$('.file_list').find('p');
            $fileListLength.each(function(){
                var file={url:$(this).attr('url'),file_name:$(this).attr('name')};
                fileArr.push(file);

            })
            $("input[name=files]").val(JSON.stringify(fileArr))

            $('.form').submit();
        });

        $('.upload-btn').click(function(){
            _file=$(this).closest('div').find('.form-item-input').val();
            fileElementId=$(this).closest('div').find('.form-item-input').attr('id');

            if (!_file) {
                layer.msg('请选择上传文件');
                return false;
            }
            $fileListLength=$('.file_list').find('p').length;
            if($fileListLength>=3){
                layer.msg('最多可上传3个文件');
                return false;
            }

            var extStart = _file.lastIndexOf('.');
            var extName  = _file.substring(extStart,_file.length).toLowerCase();
            if (extName != ".docx" && extName != ".dotx" && extName != ".dotm" && extName != ".pdf" && extName != ".xlsx" && extName != ".xls") {
                layer.msg('模板格式有误，请上传PDF、WORD、EXCEl！');
                return false;
            }

            $.ajaxFileUpload({
                url: "<?php echo $this->createUrl('notification/upload');?>", //用于文件上传的服务器端请求地址
                secureuri: false, //是否需要安全协议，一般设置为false
                fileElementId: fileElementId, //文件上传域的ID
                dataType: 'text', //返回值类型 一般设置为json
                success: function (data, status){
                    var obj = JSON.parse(data);
                    if (obj.success == 1) {
                        layer.msg(obj.message,{
                            icon: 1,
                        }, function(){
                           // layer.closeAll();
                           // location.reload();
                        });

                        html='<p url="'+obj.url+'" name="'+obj.file_name+'">'+obj.file_name+'  <span class="red-tips del-file">删除</span></p>'
                        $('.file_list').append(html)
                    } else {
                        layer.msg(obj.message,{
                            icon: 2,
                        }, function(){
                          //  layer.closeAll();
                           // location.reload();
                        });
                    }
                }
            });
            return false;
        });

        $('.file_list').on('click','.del-file',function(){
            $(this).parent().remove();
        })
    })
</script>