热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

[原]as3flashweb应用(4)批量上传之完全实现百度图片上传

2010年06月14日星期一02:36由于某度过于恶心等众所周知的原因,搬离写了5年的渣度空间,准备把技术性的文章定在CSDN了。这些都是文章备份。勿怪。。(鉴于最近有些抓取机器和抄袭者,把标题的

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根目录下就可以了

 
 
   


推荐阅读
  • 如何提高PHP编程技能及推荐高级教程
    本文介绍了如何提高PHP编程技能的方法,推荐了一些高级教程。学习任何一种编程语言都需要长期的坚持和不懈的努力,本文提醒读者要有足够的耐心和时间投入。通过实践操作学习,可以更好地理解和掌握PHP语言的特异性,特别是单引号和双引号的用法。同时,本文也指出了只走马观花看整体而不深入学习的学习方式无法真正掌握这门语言,建议读者要从整体来考虑局部,培养大局观。最后,本文提醒读者完成一个像模像样的网站需要付出更多的努力和实践。 ... [详细]
  • CentOS 7部署KVM虚拟化环境之一架构介绍
    本文介绍了CentOS 7部署KVM虚拟化环境的架构,详细解释了虚拟化技术的概念和原理,包括全虚拟化和半虚拟化。同时介绍了虚拟机的概念和虚拟化软件的作用。 ... [详细]
  • 本文介绍了Python高级网络编程及TCP/IP协议簇的OSI七层模型。首先简单介绍了七层模型的各层及其封装解封装过程。然后讨论了程序开发中涉及到的网络通信内容,主要包括TCP协议、UDP协议和IPV4协议。最后还介绍了socket编程、聊天socket实现、远程执行命令、上传文件、socketserver及其源码分析等相关内容。 ... [详细]
  • 本文讨论了在手机移动端如何使用HTML5和JavaScript实现视频上传并压缩视频质量,或者降低手机摄像头拍摄质量的问题。作者指出HTML5和JavaScript无法直接压缩视频,只能通过将视频传送到服务器端由后端进行压缩。对于控制相机拍摄质量,只有使用JAVA编写Android客户端才能实现压缩。此外,作者还解释了在交作业时使用zip格式压缩包导致CSS文件和图片音乐丢失的原因,并提供了解决方法。最后,作者还介绍了一个用于处理图片的类,可以实现图片剪裁处理和生成缩略图的功能。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • 本文介绍了如何使用php限制数据库插入的条数并显示每次插入数据库之间的数据数目,以及避免重复提交的方法。同时还介绍了如何限制某一个数据库用户的并发连接数,以及设置数据库的连接数和连接超时时间的方法。最后提供了一些关于浏览器在线用户数和数据库连接数量比例的参考值。 ... [详细]
  • 如何使用Java获取服务器硬件信息和磁盘负载率
    本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务,并获取服务器的磁盘信息,并将结果输出。然后在本地使用JS编写一个AJAX脚本,远程请求服务端的程序,得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]
  • 本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面,并总结了项目存在的问题,如前后端未分离、代码混乱等。作者表示希望通过记录和规划,能够理清思路,进一步完善该平台。 ... [详细]
  • 如何在服务器主机上实现文件共享的方法和工具
    本文介绍了在服务器主机上实现文件共享的方法和工具,包括Linux主机和Windows主机的文件传输方式,Web运维和FTP/SFTP客户端运维两种方式,以及使用WinSCP工具将文件上传至Linux云服务器的操作方法。此外,还介绍了在迁移过程中需要安装迁移Agent并输入目的端服务器所在华为云的AK/SK,以及主机迁移服务会收集的源端服务器信息。 ... [详细]
  • PDF内容编辑的两种小方法,你知道怎么操作吗?
    本文介绍了两种PDF内容编辑的方法:迅捷PDF编辑器和Adobe Acrobat DC。使用迅捷PDF编辑器,用户可以通过选择需要更改的文字内容并设置字体形式、大小和颜色来编辑PDF文件。而使用Adobe Acrobat DC,则可以通过在软件中点击编辑来编辑PDF文件。PDF文件的编辑可以帮助办公人员进行文件内容的修改和定制。 ... [详细]
  • 在线教育平台的搭建及其优势
    在线教育平台的搭建对于教育发展来说是一次重大进步。未来在线教育市场前景广阔,但许多老师不知道如何入手。本文介绍了在线教育平台的搭建方法以及与传统教育相比的优势,包括时间、地点、空间的灵活性,改善教育不公平现象以及个性化教学的特点。在线教育平台的搭建将为学生提供更好的教育资源,解决教育不公平的问题。 ... [详细]
  • 本文介绍了使用cacti监控mssql 2005运行资源情况的操作步骤,包括安装必要的工具和驱动,测试mssql的连接,配置监控脚本等。通过php连接mssql来获取SQL 2005性能计算器的值,实现对mssql的监控。详细的操作步骤和代码请参考附件。 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • React基础篇一 - JSX语法扩展与使用
    本文介绍了React基础篇一中的JSX语法扩展与使用。JSX是一种JavaScript的语法扩展,用于描述React中的用户界面。文章详细介绍了在JSX中使用表达式的方法,并给出了一个示例代码。最后,提到了JSX在编译后会被转化为普通的JavaScript对象。 ... [详细]
  • 本文介绍了一个免费的asp.net控件,该控件具备数据显示、录入、更新、删除等功能。它比datagrid更易用、更实用,同时具备多种功能,例如属性设置、数据排序、字段类型格式化显示、密码字段支持、图像字段上传和生成缩略图等。此外,它还提供了数据验证、日期选择器、数字选择器等功能,以及防止注入攻击、非本页提交和自动分页技术等安全性和性能优化功能。最后,该控件还支持字段值合计和数据导出功能。总之,该控件功能强大且免费,适用于asp.net开发。 ... [详细]
author-avatar
用户um940d5n0q
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有