safesite/safesite/templates/noticeedit.html

<div class="easyui-layout" style="width:100%;height:100%;">
    <div id='southdiv' data-options="region:'south'" style="height:50px;text-align:center;padding:5px">
        <a href="javascript:void(0)" iconCls="fa-check" class="easyui-linkbutton" onclick="tzsubmitForm()" id="submitb">提交</a>
        <a href="javascript:void(0)" iconCls="fa-close" class="easyui-linkbutton" onclick="closeForm()">取消</a>
    </div>
    <div data-options="region:'center'" style="height:100%;padding:15px 15px;">
        <form id="tzff" method="post" name="tzff" enctype="multipart/form-data">
            <div style="margin-bottom:5px">
                <input id="title" class="easyui-textbox" name="title" style="width:480px;height:80px" style="width:480px;height:100px" data-options="label:'主题',multiline:true"
                    required=true>
            </div>
            <div id="tousersdiv" style="margin-bottom:5px;display: none">
                <input id="tousernames" class="easyui-textbox"  style="width:480px;height:100px" data-options="label:'分发给',multiline:true"
                 editable=false
                >
                <input type="hidden" id="tousers" name="tousers" />
                <a class='easyui-linkbutton' onclick="choseusers('notice')" style="width:auto">选择</a>
                <div>共<span id="tousersnum" class='labeldiv'>0</span>人</div>
            </div>
            <div  style="margin-top:10px;margin-bottom:5px;display:none">
            <label class='labeldiv'>分发渠道</label>
            <label>小程序展示</label><input type="checkbox" checked='true' value='mp'/>
            <label>公众号通知</label><input type="checkbox" value='gzh'/>
            </div>
            <div style="margin-top:10px;margin-bottom:5px">
                <label class='labeldiv'>附件</label>
                <input type="file" id="file" name="" accept="*" style="margin-left: 20px" />
                <span id='ps' style="display:none">
                    <input type="button" onclick="cancleUploadFile()" value="取消" />
                    <progress id="progressBar" value="0" max="100" style="width: 100px;"></progress>
                    <span id="percentage"></span>
                    <span id="time"></span>
                </span>
                <ol id="fileol"></ol>
            </div>
            <div style="margin-top:10px;margin-bottom:5px">
            <textarea id="ckeditor" ></textarea>
            </div>
        </form>
    </div>
</div>
<script>
    
    var id = {{id}}
    var editor = CKEDITOR.replace( 'ckeditor',{'height':600});
    // var editor = ClassicEditor
    //     .create( document.querySelector( '#ckeditor' ),
    //     {
    //         toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
    //         simpleUpload:{
    //             uploadUrl:'/upfile',
    //         }
    //     } )
    //     .catch( error => {
    //         console.error( error );
    //     } );
$.get('api/notice?a=detail&id='+id ,function(res){
    var data = res.notice
    $('#title').textbox('setValue',data.title)
    editor.setData(data.content);
    for(var i=0;i<data.material.length;i++){
        filename = data.material[i].split('/').pop()
        $("#fileol").append('<li><button  onclick="removep(this)" >删除</button><a class = "filea"  target="_blank"  filepath="' + data.material[i] + '" href="http://' + window.location.host + '/' + data.material[i] + '" >' + filename + '</a></li>');
    }
})
    
    function tzsubmitForm() {
        var tzfile = new Array();
        $(".filea").each(function () {
            tzfile.push($(this).attr("filepath"));
        });
        var tzdata = $('#tzff').serializeJSON();
        tzdata['id']=id
        tzdata['tzfile']=tzfile
        var ffqd = new Array();
        $.each($('input:checkbox:checked'),function(){
            ffqd.push($(this).val());
            });
        tzdata['ffqd']=ffqd
        tzdata['content']=editor.getData();
        $.ajax({
            type: "POST",
            url: 'api/notice?a=edit',
            data: JSON.stringify(tzdata),
            datatype: "json",
            processData: false,
            contentType: "application/json;charset=utf-8",
            beforeSend: function () {
                var bo = $('#tzff').form('validate')
                if (bo == false) {
                    return bo
                } else {
                    $('#submitb').linkbutton('disable');
                }
            },
            success: function (data) {
                if (data.code == 1) {
                    $('#tztable').datagrid('reload');
                    $("#dd").dialog("close");
                } else { $.messager.alert('提示', '失败!'); }
                $('#submitb').linkbutton('enable');
            },
        });
    }
    document.getElementById('file').onchange = function () {
        var fileObj = this.files[0];
        var url = 'upfile'
        var form = new FormData();
        form.append("upfile", fileObj); // 文件对象
        xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
        xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
        $('#ps').show();
        xhr.onload = function (evt) {            //服务断接收完文件返回的结果
            var data = JSON.parse(evt.target.responseText);
            if (data.code = 1) {
                $('#ps').css('display', 'none');
                $("#fileol").append('<li><button  onclick="removep(this)" >删除</button><a class = "filea"  target="_blank" filepath="' + data.filepath + '" href="http://' + window.location.host + '/' + data.filepath + '" >' + data.filename + '</a></li>');
            } else { alert("上传失败！"); } document.getElementById('file').value = '';
        }; //请求完成
        xhr.onerror = function (evt) { alert("上传失败！"); $('#ps').css('display', 'none'); }; //请求失败                   
        xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
        xhr.upload.onloadstart = function () {//上传开始执行方法
            ot = new Date().getTime();   //设置上传开始时间
            oloaded = 0;//设置上传开始时，以上传的文件大小为0
        };
        xhr.send(form); //开始上传，发送form数据        
        //上传进度实现方法，上传过程中会频繁调用该方法     
    }
    //取消上传
    function cancleUploadFile() {
        xhr.abort();
        $('#ps').hide();
        document.getElementById('file').value = '';
    }
    function progressFunction(evt) {
        var progressBar = document.getElementById("progressBar");
        var percentageDiv = document.getElementById("percentage");
        // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
        if (evt.lengthComputable) {//
            progressBar.max = evt.total;
            progressBar.value = evt.loaded;
            percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
        }
        var time = document.getElementById("time");
        var nt = new Date().getTime();//获取当前时间
        var pertime = (nt - ot) / 1000; //计算出上次调用该方法时到现在的时间差，单位为s
        ot = new Date().getTime(); //重新赋值时间，用于下次计算
        var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b
        oloaded = evt.loaded;//重新赋值已上传文件大小，用以下次计算
        //上传速度计算
        var speed = perload / pertime;//单位b/s
        var bspeed = speed;
        var units = 'b/s';//单位名称
        if (speed / 1024 > 1) {
            speed = speed / 1024;
            units = 'k/s';
        }
        if (speed / 1024 > 1) {
            speed = speed / 1024;
            units = 'M/s';
        }
        speed = speed.toFixed(1);
        //剩余时间
        var resttime = ((evt.total - evt.loaded) / bspeed).toFixed(1);
        time.innerHTML = '，速度：' + speed + units + '，剩余时间：' + resttime + 's';
    }
    function aaa(x) {
        if (x == "notice") {
            $('#tousers').attr('value', top.$('#in').val());
            $('#tousernames').textbox('setValue', top.$('#in').attr('show'));
            $('#tousersnum').html(top.$('#in').attr('total'));
        }
    }

</script>