模拟QQ心情图片上传预览示例


出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览。

先粘上以下插件,在别的图片上传功能说不定各位能用的上。

1、jQuery File Upload

Demo地址:http://blueimp.github.io/jQuery-File-Upload/
优点是使用jquery进行图片的异步上传,可控性好,可根据自己的需求任意定制;
缺点是在IE9等一些浏览器中,不支持图片预览,图片选择框中不支持多文件选择(这点是我抛弃它的原因);

2、CFUpdate

Demo地址:http://www.access2008.cn/update/
优点:使用js+flash实现,兼容所有浏览器,优点界面效果还可以,支持批量上传、支持预览、进度条、删除等功能,作为图片的上传控件非常好用;
缺点:定制型插件,只能修改颜色,样式已经固定死了;

3、SWFUpload

下载地址:http://code.google.com/p/swfupload/
中文文档帮助地址:http://www.phptogether.com/swfuploadoc/#uploadError
本文所使用的就是此插件,使用flash+jquery实现,可以更改按钮及各种样式;监听事件也很全。

以下贴出源码及设计思路,主要功能点包括:
1、图片的上传预览(先将图片上传至服务器,然后再返回地址预览,目前抛开html5比较靠谱的预览方式)
2、缩略图的产生(等比例缩放后再截取中间区域作为缩略图,类似QQ空间的做法,不过貌似QQ空间加入了人脸识别的功能)

以下是此次实现的功能截图:
 
1、Thumbnail.cs

项目源码地址


« 
» 

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3