本例实现了一个用于在线聊天界面发送图片的效果

HTML部分：

新建input标签，隐藏起来

1
2
3
4
5
<!--隐藏的表单控件-->
<input type="file" name="pic" id="file" style="displace: none" /> 

<!--用来交互的加号按钮-->
<i class="icon icon-add image_up t-50" style="color: #888;"></i></i>

JS发送部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
$(".image_up").click(function(){ // 点击加号
    $(".file").click(); // 模拟点击事件
});

$("#file").change(function(){ // 内容改变，即选择了图片
    formdata = new FormData();
    formdata.append('fromid', fromid);
    formdata.append('toid', toid);
    formdata.append('online', online);
    formdata.append('file', $('#file')[0].file[0]);
    
    $.ajax({
        url: API_URL+"uploadimg",
        type: 'POST',
        cache: false,
        data: formdata,     // 发送的数据
        dataType: 'json',   // 收到的数据格式
        processData: false, // 不转成对象的形式
        contentType: false, // 不转成URLencode编码
        success: function(data, status, xhr){ // 上传结果
            if (data.status == 'ok') { // 上传成功
                // 添加到自己的聊天框中
                $(".chat-content").append('<div class="chat-text section-right flex"><span class="char-img"><i class="icon icon-sanjiao3 t-32"></i><img width="120em" height="120em" src="__ROOT__/uploads/'+data.img_name+'"></span> <span class="char-img" style="background-image: url('+from_head+');"></span></div>');
                $(".chat-content").scrollTop(3000); // 滚动到底部
                
                // 通过socket发送给聊天对象
                var message = '{"data":"'+data.img_name+'", "fromid":"'+fromid+'", "toid":"'+toid+'", "type":"say_img"}';
                ws.send(message);
                
                $("#file").val(""); // 清空，以便响应下一次的 change 时间
            } else { // 上传失败
                
            }
        }
    });
});

PHP部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* 上传图片，返回图片地址 */
public function uploadimg() {
    $file = $_FILES['file'];
    $fromid = input('fromid');
    $toid = input('toid');
    $online = input('online');
    $suffix = strtolower(strrchr($file['name'], '.')); // 获取文件后缀
    $type = ['.jpg', '.jpeg', '.png', '.gif'];
    if (!in_array($suffix, $type)) {
        return ['status' => 'img type erroe'];
    }
    if ($file['size'] / 1024 > 5*1024) { // 如果大于5M
        return ['status' => 'img is too large'];
    }
    $filename = uniqid("chat_img_", false);        // 生成一个带前缀的唯一的微秒ID
    $uploadpath = ROOT_PATH . 'public\\uploads\\'; // 文件夹路径
    $file_up = $uploadpath . $filename . $suffix;  // 文件路径
    
    $res = move_upload_file($file['tmp_name'], $file_up);
    if ($res) {
        $name = $filename . $suffix;
        $data['content'] = $name;
        $data['fromid'] = $fromid;
        $data['toid'] = $toid;
        $data['time'] = time();
        $data['isread'] = $online;
        $data['type'] = 2; // 表示是图片消息
        $message_id = Db::name('message')->insertGetId($data);
        if ($message_id) {
            return ['status' => 'ok', 'img_name' => $name];
        } else {
            return ['status' => 'false'];
        }
        
    }	
}

PHP GatewayWorker部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*...*/
case "say_img" :
{
	$toid = $message_data['toid'];
	$fromid = $message_data['fromid'];
	$img_name = $message_data['data'];
    $data = [
		'type' => 'say_img',
        'fromid' => $fromid.
        'toid' => $toid,
        'img_name' => $img_name
    ];
    Gateway::sentToUid($toid, json_encode($date));
    return ;
}

JS目标接收部分：

1
2
3
4
5
6
case "say_img" :
{
    // 添加到自己的聊天框中
    $(".chat-content").append('<div class="chat-text section-left flex">span class="char-img" style="background-image: url('+to_head+');"></span><span class="char-img"><i class="icon icon-sanjiao3 t-32"></i><img width="120em" height="120em" src="__ROOT__/uploads/'+message.img_name+'"></span> <</div>');
    $(".chat-content").scrollTop(3000); // 滚动到底部
}

参考：网易云课堂 https://study.163.com/course/courseLearn.htm?courseId=1005015012#/learn/video?lessonId=1051354078&courseId=1005015012