php+ajax 实现聊天功能（不能实时更新）

<div class="chat-box-input-wrapper">
                <div class="chat-box-toolbar">
                    <input type="file" accept="image/png, image/jpeg, image/jpg" id="input-image">
                        <div class="item" id="btn-select-image">
                            <i class="iconfont fa fa-picture-o" aria-hidden="true"></i>
                        </div>
                </div>
                <div class="chat-box-textarea">
                    <textarea id="textarea-platform"></textarea>
                </div>
                <div class="chat-box-action">
                    <input type="hidden" name="aid" id="aid" value="<?php echo $aid; ?>">
                    <span class="item item-btn" id="btn-send-platform">发送</span>
                </div>
            </div>

js  先引用jquery

<script>
    // 获取当前时间
    function getCurrentTime() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        if (month <= 9) {
            month = '0' + month;
        }
        if (day <= 9) {
            day = '0' + day;
        }
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        if (hour <= 9) {
            hour = '0' + hour;
        }
        if (minute <= 9) {
            minute = '0' + minute;
        }
        if (second <= 9) {
            second = '0' + second;
        }
        var currentTime = year + '-' + month + '-' + day + ' ' +
            hour + ':' + minute + ':' + second;
        return currentTime;
    }

    // 滚动到对话框底部
    function scrollBottom(mode, chatBoxId) {
        var chatBox = document.getElementById(chatBoxId);
        switch (mode) {
            case 'direct': {
                chatBox.scrollTop = chatBox.scrollHeight;
                break;
            }
            case 'animated': {
                var tempLength = chatBox.scrollHeight - chatBox.offsetHeight - chatBox.scrollTop;
                var tempStep = null;
                if (tempLength > 0) {
                    if (tempLength < chatBox.scrollTop) {
                        tempStep = 5;
                    } else {
                        tempStep = 10;
                    }
                    var tempInterval = setInterval(function () {
                        chatBox.scrollTop += tempStep;
                        if (chatBox.scrollTop >= chatBox.scrollHeight - chatBox.offsetHeight) {
                            clearInterval(tempInterval);
                        }
                    }, 1);
                }
                break;
            }
        }
    }

    //设置选中图片渲染
   function renderImageSelected(imageDataUrl, chatBoxListId) {
        var chatBoxList = document.getElementById(chatBoxListId);
        var tempItem = '<li class="chat-box-item platform">\
                        <div class="chat-box-item-content">\
                            <div class="name">平台</div>\
                            <div class="bubble">\
                                <div class="bubble-box">\
                                    <img src="' + imageDataUrl + '" alt="img" />\
                                </div>\
                            </div>\
                            <div class="time">' + getCurrentTime() + '</div>\
                        </div>\
                        <div class="chat-box-item-avatar"\
                            style="background-image: url(/admin/static/img/adminlte/user3-128x128.jpg)"\
                        ></div>\
                    </li>';
        chatBoxList.innerHTML += tempItem;
    }

    // 渲染文本框内容
    function renderTextSend(text, chatBoxListId) {
        var chatBoxList = document.getElementById(chatBoxListId);
        var tempItem = '<li class="chat-box-item platform">\
                        <div class="chat-box-item-content">\
                            <div class="name">平台</div>\
                            <div class="bubble">\
                                <div class="bubble-box">\
                                    <pre>' + text + '</pre>\
                                </div>\
                            </div>\
                            <div class="time">' + getCurrentTime() + '</div>\
                        </div>\
                        <div class="chat-box-item-avatar"\
                            style="background-image: url(/admin/static/img/adminlte/user3-128x128.jpg)"\
                        ></div>\
                    </li>';
        chatBoxList.innerHTML += tempItem;
    }

    // 设置对话图片选择
    function selectImageChat() {
        var inputImage = document.querySelector('#input-image');
        var aid = $("#aid").val();
        var clickInputImage = null;
        var tempDataUrl = null;
        inputImage.addEventListener('change', function () {
            var tempFile = this.files[0];
            if (tempFile) {
                if (tempFile.type.match(/.jpg|.jpeg|.png|.bmp/i)) {
                    if (tempFile.size <= 3 * Math.pow(1024, 2)) {

                        var aid = $("#aid").val();
                        // console.log(aid);
                        var formData = new FormData();
                        formData.append('file', $(this)[0].files[0]);
                        // console.log(formData);
                        $.ajax({
                            //url: '<?//= Url::toRoute(['appeal/addconverpic'])?>//',
                            url: '',
                            type: 'post',
                            data: formData,

                            contentType: false,
                            processData: false,
                            success: function (data) {
                                if (data == 111) {
                                    tempDataUrl = URL.createObjectURL(tempFile);
                                    inputImage.value = '';
                                    renderImageSelected(tempDataUrl, 'chat-box-list-platform');
                                    scrollBottom('animated', 'chat-box-platform');
                                } else {
                                   alert("图片发送错误");
                                }
                            }
                        })




                    } else {
                        alert('图片大小应不超过3mb，请重新选择');
                    }
                } else {
                    alert('图片格式应为jpg/jpeg/png，请重新选择');
                }
            } else {
                console.log('没有选中图片');
            }
        });
        document.querySelector('#btn-select-image').addEventListener('click', function () {
            clickInputImage = new MouseEvent('click');
            inputImage.dispatchEvent(clickInputImage);
        }, false);
    }


     //设置输入内容发送
    function sendTextInput() {
        document.getElementById('btn-send-platform').addEventListener('click', function () {
            var tempText = document.querySelector('#textarea-platform').value;
            var aid = $("#aid").val();
            if (tempText !== '') {


                $.ajax({
                    url: '',
                    data: {content: tempText, aid: aid},
                    method: "POST",
                    success: function (result) {
                        // console.log(result);
                        layer.closeAll();
                        if (result.code === 0) {
                            renderTextSend(tempText, 'chat-box-list-platform');
                            scrollBottom('animated', 'chat-box-platform');
                        } else {
                            layer.msg(res.msg, {icon: 2, time: 2000});
                        }
                    }
                })
            } else {
                alert('发送内容不能为空');
            }
        });
    }

    // 页面加载时对话框滚动到底部
    function scrollBottomOnLoad() {
        scrollBottom('direct', 'chat-box-platform');
        document.querySelectorAll('.bubble-box>img').forEach(function () {
            this.addEventListener('load', function () {
                scrollBottom('direct', 'chat-box-platform');
            });
        });
    }

    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function () {
        scrollBottomOnLoad();
        selectImageChat();
        sendTextInput();
    });
</script>

php 代码

if($_FILES["file"]["error"])
        {
            echo $_FILES["file"]["error"];
        }
        else
        {

            //没有出错
            //加限制条件
            //判断上传文件类型为png或jpg且大小不超过1024000B
            if(($_FILES["file"]["type"]=="image/png"||$_FILES["file"]["type"]=="image/jpeg")&&$_FILES["file"]["size"]<1024000)
            {
                //防止文件名重复

                $filename =$_SERVER['DOCUMENT_ROOT']."/uploads/image/".date('Y', time()).date('m', time());
                if(file_exists($filename)){
                    $file_name = $filename.'/'.date('d', time());
                    $fileName = $file_name . '/' . date('Y', time()) . date('m', time()) . date('d', time()) . date('H', time()) . date('i', time()) . date('s', time()) . "_" . substr(microtime(true), -3) . '.jpg';
                    //上传到数据库  图片的路径
                    $res = substr($fileName,strripos($fileName,"/uploads"));
                    

                    

                    //判断文件是否存在
                    if(file_exists($file_name)){
                        $res = move_uploaded_file($_FILES["file"]["tmp_name"],$fileName);
                    }else{
                        mkdir($file_name, 755, true);
                        $res = move_uploaded_file($_FILES["file"]["tmp_name"],$fileName);
                    }
                }else{
                    mkdir($filename, 755, true);
                    $file_name = $filename.'/'.date('d', time());
                    $fileName = $file_name . '/' . date('Y', time()) . date('m', time()) . date('d', time()) . date('H', time()) . date('i', time()) . date('s', time()) . "_" . substr(microtime(true), -3) . '.jpg';

                    //上传到数据库  图片的路径
                    $res = substr($fileName,strripos($fileName,"/uploads"));
                  
                    if(file_exists($file_name)){
                        $res = move_uploaded_file($_FILES["file"]["tmp_name"],$fileName);
                    }else{
                        mkdir($file_name, 755, true);
                        $res = move_uploaded_file($_FILES["file"]["tmp_name"],$fileName);
                    }
                }
                if($res ){
                    echo 111;
                }
            }
            else
            {
                echo"文件类型不对";
            }
        }