[原]as3 flash web 应用 （4）批量上传之 完全实现百度图片上传

2010年06月14日 星期一 02:36

由于某度过于恶心等众所周知的原因，搬离写了5年的渣度空间，准备把技术性的文章定在CSDN了。这些都是文章备份。勿怪。。
（鉴于最近有些抓取机器和抄袭者，把标题的【原】字都复制，我不得不声明：本文为 yukon12345原创，转载请注明出处http://blog.csdn.net/yukon12345）

这次完成了百度flash上传UI界面的全部功能。编码基本上算是独立完成，以自己的方法实现了它的UI功能。参考了百度的100行左右的关于检测重复文件引用的代码。接下来就要实现与js和php的交互了。

从研究百度的上传UI我学到了不少交互方面的知识。

百度flash上传UI功能包括： （当然这里不指与服务器和js的进一步交互，以及用户身份验证机制）

1，显示真实的上传进度；
2，批量缩略图读取与上传；
3，附加一些信息比如是否允许评论和转帖；
4，可将将选择的缩略图从上传队列任意位置删除；
5，上传的暂停和中途添加；
6，旋转图片;
7，在客户端即可验证上传的文件类型，编码，大小是否合法。

当然，根据我2晚+周末的开发和使用，百度的flash图片上传UI还有几个小小的不足：
首先，识别可上传的文件方面有些不足。

1，一旦添加的文件是 0字节大小的文件， 无法单独删除错误文件，不报错，必须点击“全部删除”。而且删除后添加的任何文件不能显示预览图，不能载入，不能上传。

2，识别欺骗性文件的不足：比如我把 一个小的rar压缩包改名成gif后缀，不报错，点击上传后才出现上传错误。

3，关于避免强制输入文件名时候的不足： 比如我打开文件浏览框后手动输入一个swf.rar文件名（前提是文件夹里有）点击上传，此文件后面队列正确的文件也无法进行上传，停止响应，必须重新刷新页面。

4， 当选择好了文件，出现预览图后，再在磁盘里改变文件名，上传工具将中止改名图片的上传，此图片之后的文件也无法上传。不报错。无响应。必须刷新。

5， 一旦网络链接不良，导致传输过程时候短暂掉线，将无法上传所有中断后的文件。就算只断开一瞬间也不行。而且不报错误，无响应，必须刷新。
上面5点感觉开发人员有点像在使用鸵鸟法则。出现了错误不处理，只return，错误报告不明显，用户体验差了点。

我所说的这5点不足，我都在程序里解决了，文件错误分别会在预览期间报“文件大小错误”，“文件编码错误”，“文件类型错误”，“文件是否存在”和“网络链接错误”并且在上传之前会提示你删掉错误文件，而在上传过程中如出现断网，或者找不到网址，仍然可以选择暂停或者抛开错误图片继续上传接下来的文件。

然后，说到错误报告不明显，还有：
6。当图片队列已经满，或者选择的图片中有重复添加的，或者添加的文件使队列满，或者点击上传时，待上传队列中有错误文件时，百度在过滤的时候都没有提醒用户，。


对于这些，我特意在空余地方做了一个“提醒”消息栏，都会以红色的滚动字方式报告给用户。

接下来，关于文件的批量操作：

7，百度的上传界面选定多个文件批量操作时，必须按住ctrl，如果一不小心点到其他地方就取消选择。这仿操作系统的操作方法我倒感觉不方便，因此我选择了只靠点击图片来切换是否选择。
另外，就算上传时候选择旋转了图片，上传到相册图的图片角度很多还是没改变，这可能是flash与服务器的同步做的不到位。

8，载入缩略图时只能一张一张载入，浪费电脑的读取速度。个人感觉完全可以同时载入。再烂的电脑，就算同时加载64张也不会卡到哪里去。
因此我把它做成了可同时载入预览图的模式。（这点有待商榷，不知道这个页面是不是想支持手机使用。不过不大可能）

我开发的这个修正版也有些缺点，

1.暂时无法载入和上传bmp缩略图。我对bmp图片编码和解码还没研究过。

2.另外暂时还没来得及做载入缩略图的loading条。只做了上传时的loading条。不过问题不大。一般大小的图片显示缩略图几乎是一瞬间的事情。
3.在上传的时候就算不暂停也允许删除图片。不过貌似不会导致什么错误。。。以后测试测试吧。

最后我加了个蓝色的跟随鼠标缓动的图片名称提示条。。。算是美化吧。

======================================================

文件下载地址 （我放在了CSDN，需要6分才能下载。不过下载完后打个分评论一下会返回给你6分。MIT使用许可。允许自由使用，修改，但须保留版权信息。）

============================================================

使用方法：打开YUploadImg.as,修改配置参数sizeLimit，_upURL，和_numLimit分别是大小限制，上传地址，和图片数量限制（由于暂时没有和js交互，不能动态改变舞台大小，建议设置成小于32张）。然后再编译一下就可以用了。

当然如果要真放在网站上投入运行的话，你还必须自己写点用户的身份验证机制。

另外打开YUploadImg.swf也可以试用，只是是不能真的上传给服务器了，因为地址还没设置正确，上传的时候会报网络地址错误。

如果你感觉程序过于庞大，可点击下面的“上一篇文章”，有个简短版的单幅缩略图与上传

++++++++++++更新+++++++++++++++++++++++++++

很多人遇到安全设置问题，把这个存成 crossdomain.xml 放在服务器www根目录下就可以了

<?xml version="1.0"?>  
<cross-domain-policy>  
  <allow-access-from domain="*" />  
</cross-domain-policy>