上传文件与文本编辑器的那点破事：冗余与管理

web开发总是回避不了一个问题，那就是文件上传的问题，不管是cms还是bbs都是如此。

 

问题一： 如何关联图片和文章之间的关系？

问题二： 当在文章发布页面上传文件后，文章却没有提交，造成的垃圾文件怎么办？

问题三： 当编辑文章时，在编辑器中删除不用的图片文件怎么办？

 

 

一 异步上传环境下

 

目前web上传流行的方式是iframe或ajax异步上传文件后，返回文件上传至服务器后的路径与文件名到添加文章的FORM，然后提交文章。

这样做的坏处是用户可能上传文件后却不提交文章，造成了垃圾文件，好处是文章提交到服务器后，我们不需要再对文件占位符进行Replace。

 

针对这种异步文件上传的缺点，可以使用以下“UpfileStamp方法”避免冗余文件的产生：

 

1 点击添加文章 打开文章添加的页面的时候  生成一个UpfileStamp  该值保存在文章添加的FORM中的一个Hidden类型的Input控件中。

 

2 点击上传文件，打开Iframe页，将该UpfileStamp传到Iframe页，文件上传保存到服务器的时候，将该UpfileStamp保存到上传文件的数据表TB_Upfiles中。

 

3 继续上传文件，依然使用该UpfileStamp，这个一个UpfileStamp标识了同一组上传文件。

 

4 点击添加文章，文章接收页面得到Hidden域的UpfileStamp的值，将文章插入数据库，得到文章的ID，更新这组UpfileStamp的文件的ArticleID为刚刚插入的文章ID。

 

5 系统加入垃圾文件清理功能，对所有仅有UpfileStamp而没有ArticleID的上传文件纪录进行清理。

 

 

二 同步上传环境下

 

在Php或Asp.net中的同步文件上传，就是文件上传和文章FORM的提交在同一个请求中进行，由PHP或Asp.net对文本域和数据域进行分离。

这样做的好处就是避免了文件已经上传但文章并未添加的问题，但是坏处就是我们要在文本编辑器中使用文件占位符，然后数据提交到服务端再对文件占位符进行Replace替换，替换为上传后的文件，这个过程非常繁琐，无论是对于编辑器的JS来说还是服务器的Replace来说。