增加一个文件组件

[Mcayear]

像telegram那样，文件也是有单独样式的（

[YubaC]

我在 #12 中添加了文件的选项，并预留了发送时用的function。
但这个只能实现选择即发送（就是选择了文件后立刻发送，不能放在输入框里像编辑文字一样进行编辑）。
如果想要实现下图QQ的输入框那样可以把文件拖到输入框里的效果，可能需要一些其它的改进。

因为文件传输的话是一定要把文件单独发送的，不可能混在文字里一块送出去的，所以我的想法是：

1. 额外制作单独的文件样式，比如这样：
   
   这可能需要和 @ZHANGLUInfinite 做的JS渲染进行一下统一，额外添加一个文件选项。

2. 将这个项目里的JS统一在一个Class内，以方便调用，并添加完善的文档及示例。

另外，我查遍了全网也没查到怎么直接在<textarea>内添加除了文字以外的其他HTML元素，希望有大佬可以指点一二。
P.S.：我看了Discuz!的源码，他们似乎是使用<iframe>实现的，这个大约我们玩不来。

[Paxxs]

@YubaC "另外，我查遍了全网也没查到怎么直接在<textarea>内添加除了文字以外的其他HTML元素，希望有大佬可以指点一二。
P.S.：我看了Discuz!的源码，他们似乎是使用<iframe>实现的，这个大约我们玩不来。"

其实也可以不需要那么复杂，我们可以在设计上规避的。文件类型发出去一般都是单独占用一个消息气泡，没有和文本一起进行排版的需求（其实甚至聊天发的图片也一样），所以可以这样设计来简化实现所需的工作量：

[Mcayear]

是的，文件不一定要夹在文本中间。
首先这个目的意义不大，其次是这很难实现添加更多信息的同时使排版美观合理。

[YubaC]

@Paxxs 这个思路很棒！但是我认为恐怕它存在一点小问题：即文件数量过多时（比如这样），

会造成不可避免的溢出。
针对这个问题有两个解决方案：

1. 添加横向的滚动条，使其保持在同一列上。
2. 让多溢出文件自然换行。

方案一似乎是可行的，但在Firefox浏览器内我们无法具体的调整滚动条的样式，于是它会变得奇丑无比，就算使用thin也不好看：

可以看到，这里的进度条直接挡住了文件列表。
此外方案一还有一个缺点，就是在选择了大量文件的时候，想要在文件海中找到某个特定的文件将变得无比困难，就像在一个打开了很多标签页的浏览器里找到某个特定的标签页一样。这对于残障人士来说是尤为不友好的。

方案二相较于方案一最大的优点就是它能够完美的展现所有文件而不需要换行，但这也正是它的缺点。大量的文件会挤占大量的输入组件空间，恐怕同样会使输入框变得奇丑无比。

[zllz9527]

选择文件这个逻辑仿QQ或者微信的就行了，选择文件后直接发送就好了。不用那么复杂的逻辑，毕竟是个主要功能是聊天。而且我也看了市面上的聊天软件都是这个逻辑。想得太多反而会复杂起来

[YubaC]

@ZHANGLUInfinite 是的，我也这么认为。
因此我在 #12 中就是这么设计的。

[zllz9527]

👌👌。等我有空了加个文件信息框就行了

[YubaC]

@ZHANGLUInfinite 我个人建议你在messageType里额外增加一个新的选项，比如“file”。
同时我建议我们把JS文件综合一下，合并到一个Class内以方便书写与调用。

[YubaC]

@Paxxs 其实也可以不需要那么复杂，我们可以在设计上规避的。文件类型发出去一般都是单独占用一个消息气泡，没有和文本一起进行排版的需求（其实甚至聊天发的图片也一样），所以可以这样设计来简化实现所需的工作量：

但是一般来说在输入框内插入图片是必备功能，从聊天软件到邮件都支持这个功能。
我想也许我们可以参考Markdown的图片插入方式，就像Github一样？
往大里想，也许我们甚至可以支持Markdown输入？

[Vi-brance]

我找到一种将div设置为可编辑元素的方式来实现富文本的相应功能，不知道在这里是否可行？

[YubaC]

@Vi-brance 可以麻烦你详细说明或给出文章链接吗？
不过这里是用的<textarea>做的输入框，如果改成div的话估计要大改。

[Vi-brance]

@YubaC https://github.com/jrainlau/chat-input-box
这是我之前找到的富文本框使用示例，我自己写的聊天室扩展也采用了这种实现方式，但是示例只实现了图片和文本共存的情况，不知道对于文件组件是否有帮助

[Vi-brance]

我的实现方式是遍历div的子元素，通过判断子元素的类型将其打包为对应的图片或文字信息，最后组合成一个消息链交给其他函数处理。
我认为直接用base64编码写入img的方式虽然简单直接，但是当发送的图片很大时（QQ聊天中总有群友能找到高清大图），这将对网页的处理速度造成不小的负担

[YubaC]

是的，是的，所以我把那个回复删了（逃）