增加一个文件组件
Mcayear opened this issue · 20 comments
像telegram那样，文件也是有单独样式的（
我在 #12 中添加了文件的选项，并预留了发送时用的function。
但这个只能实现选择即发送（就是选择了文件后立刻发送，不能放在输入框里像编辑文字一样进行编辑）。
如果想要实现下图QQ的输入框那样可以把文件拖到输入框里的效果，可能需要一些其它的改进。
因为文件传输的话是一定要把文件单独发送的，不可能混在文字里一块送出去的，所以我的想法是：
-
额外制作单独的文件样式，比如这样：
这可能需要和 @ZHANGLUInfinite 做的JS渲染进行一下统一，额外添加一个文件选项。 -
将这个项目里的JS统一在一个Class内，以方便调用，并添加完善的文档及示例。
另外，我查遍了全网也没查到怎么直接在<textarea>内添加除了文字以外的其他HTML元素，希望有大佬可以指点一二。
P.S.：我看了Discuz!的源码，他们似乎是使用<iframe>实现的，这个大约我们玩不来。
@YubaC "另外，我查遍了全网也没查到怎么直接在<textarea>内添加除了文字以外的其他HTML元素，希望有大佬可以指点一二。
P.S.：我看了Discuz!的源码，他们似乎是使用<iframe>实现的，这个大约我们玩不来。"
其实也可以不需要那么复杂，我们可以在设计上规避的。文件类型发出去一般都是单独占用一个消息气泡，没有和文本一起进行排版的需求（其实甚至聊天发的图片也一样），所以可以这样设计来简化实现所需的工作量：
是的，文件不一定要夹在文本中间。
首先这个目的意义不大，其次是这很难实现添加更多信息的同时使排版美观合理。
@Paxxs 这个思路很棒！但是我认为恐怕它存在一点小问题：即文件数量过多时（比如这样），
会造成不可避免的溢出。
针对这个问题有两个解决方案：
- 添加横向的滚动条，使其保持在同一列上。
- 让多溢出文件自然换行。
方案一似乎是可行的，但在Firefox浏览器内我们无法具体的调整滚动条的样式，于是它会变得奇丑无比，就算使用thin也不好看：
可以看到，这里的进度条直接挡住了文件列表。
此外方案一还有一个缺点，就是在选择了大量文件的时候，想要在文件海中找到某个特定的文件将变得无比困难，就像在一个打开了很多标签页的浏览器里找到某个特定的标签页一样。这对于残障人士来说是尤为不友好的。
方案二相较于方案一最大的优点就是它能够完美的展现所有文件而不需要换行，但这也正是它的缺点。大量的文件会挤占大量的输入组件空间，恐怕同样会使输入框变得奇丑无比。
选择文件这个逻辑仿QQ或者微信的就行了，选择文件后直接发送就好了。不用那么复杂的逻辑，毕竟是个主要功能是聊天。而且我也看了市面上的聊天软件都是这个逻辑。想得太多反而会复杂起来
@ZHANGLUInfinite 是的，我也这么认为。
因此我在 #12 中就是这么设计的。
👌👌。等我有空了加个文件信息框就行了
@ZHANGLUInfinite 我个人建议你在messageType里额外增加一个新的选项，比如“file”。
同时我建议我们把JS文件综合一下，合并到一个Class内以方便书写与调用。
@Paxxs 其实也可以不需要那么复杂，我们可以在设计上规避的。文件类型发出去一般都是单独占用一个消息气泡，没有和文本一起进行排版的需求（其实甚至聊天发的图片也一样），所以可以这样设计来简化实现所需的工作量：
但是一般来说在输入框内插入图片是必备功能，从聊天软件到邮件都支持这个功能。
我想也许我们可以参考Markdown的图片插入方式，就像Github一样？
往大里想，也许我们甚至可以支持Markdown输入？
我找到一种将div设置为可编辑元素的方式来实现富文本的相应功能，不知道在这里是否可行？
@Vi-brance 可以麻烦你详细说明或给出文章链接吗？
不过这里是用的<textarea>做的输入框，如果改成div的话估计要大改。
@YubaC https://github.com/jrainlau/chat-input-box
这是我之前找到的富文本框使用示例，我自己写的聊天室扩展也采用了这种实现方式，但是示例只实现了图片和文本共存的情况，不知道对于文件组件是否有帮助
我的实现方式是遍历div的子元素，通过判断子元素的类型将其打包为对应的图片或文字信息，最后组合成一个消息链交给其他函数处理。
我认为直接用base64编码写入img的方式虽然简单直接，但是当发送的图片很大时（QQ聊天中总有群友能找到高清大图），这将对网页的处理速度造成不小的负担
是的，是的，所以我把那个回复删了（逃）
@Vi-brance 其实我一开始的想法是使用base64编码可以直接使用现成的JS库 lite-chatbox.js而不用再新添一个信息种类（在raw和text之外）。
也许我们可以试试在拖拽进来的同时就开始上传图片，上传好了后才显示（期间用一个加载中的动图代替），最后把这个动图的src换成后端返回来的src，就像Github的一样？
如果使用js，那么我的设想是这样的。
拖到框里面后触发一个FileUploadEvent传递2个参数。
1、文件的FileList对象，用于获取文件基信息。
（第一次我写的是Blob，它无法像FileList处理多个文件被选择的情况）
2、这个文件对应的消息元素，用于处理显示样式。
消息元素类似这个紫色的部分：
我在 #15 中添加了对在文本中插入图片的支持。
不过目前使用的还是直接写入base64.我的想法是这一部分交给使用者自己处理，因为这涉及到与后端的通信。不过我们可以把“建议单独处理图片”的建议写到README里，因为这一部分代码并不复杂，只要上传好图片后换一下src就好了。
至于文件的样式还没实现。
我参考了icalingua++中发送文件的逻辑，是否可以实现以下逻辑：
- 选择文件后在textarea中显示对应文件，但是此时将禁止用户向textarea中插入除新文件外的其他文本，直到textarea清空（文件发送或用户删除所有在textarea中的文件）时，才能键入文本
- 对于大量文件的排版问题，可以简单地限制单次发送文件组的文件数上限
- 发送文件时我建议将textarea中的所有文件依次发送，即每个文件单独作为一条消息发送，这样排版可能会更加方便（也许吧
@Vi-brance 是的，我想这个逻辑的确可以实现。
但是问题是，当用户同时拖入图片和文件的时候，该怎么处理？以及，如何在不禁用输入编辑的情况下禁用文件输入？
也许我们可以试试禁用输入框的编辑功能，然后给每个文件单独添加关闭按钮？
但是还有一个功能有待考虑，输入框在发送过大的图片的时候，是以文件的方式发送的，这可能需要做一下调整。
我最近将输入框的代码重构了一遍，过一阵子发一个PR。