FLASH图片上传功能—从百度编辑器UEditor里面提取出来
为了记录工作中碰到的各种问题，以及学习资料整理，今天开始，将以往的文章进行了一个整理，以后也开始认真的记录学习过程中的各种问题
在HTML里面的文件上传功能一直是个问题，为了实现上传文件大小限制，怎样显示进度条问题，以及上传前图片预览，也试过各种办法，直到有一天看到百度编辑器中的图片上传功能。花了点功夫把他单独提取出来。
最终效果图如下：
这个功能可以提供多个图片文件选择，预览，然后对上传的图片在上传队列中删除，以及旋转和，上传中进度条显示，以及上传相册的选择。
源代码下载路径为: http://pan.baidu.com/s/13iNYw
结构
1：FLASH文件：imageUploader.swf
用来显示上传队列，并提供图片增加，预览，删除，旋转，以及进度条的显示功能！
包括了一些参数设置，例如上传处理程序，以及相关的属性设置。其中最重要参数为:flashvars, 他的值经过URL编码。
URL编码转换功能，你可以通过http://tool.chinaz.com/Tools/URLEncode.aspx 这个工具实现。
原始值为:
container=flashContainer&url=/BaiduUE/imageUp&ext={"param1":"value1", "param2":"value2"}&fileType={"description":"图片", "extension":"*.gif;*.jpeg;*.png;*.jpg"}&flashUrl=imageUploader.swf&width=608&height=272&gridWidth=121&gridHeight=120&picWidth=100&picHeight=100&uploadDataFieldName=upfile&picDescFieldName=pictitle&maxSize=4&compressSize=2&maxNum=32&compressSide=0&compressLength=900
备注
- container:"flashContainer", //flash容器id
- url:"/BaiduUE/imageUp", // 上传处理页面的url地址
- ext:'{"param1":"value1", "param2":"value2"}', //可向服务器提交的自定义参数列表
- fileType:'{"description":"图片", "extension":"*.gif;*.jpeg;*.png;*.jpg"}', //上传文件格式限制
- flashUrl:'imageUploader.swf', //上传用的flash组件地址
- width:608, //flash的宽度
- height:272, //flash的高度
- gridWidth:121, // 每一个预览图片所占的宽度
- gridHeight:120, // 每一个预览图片所占的高度
- picWidth:100, // 单张预览图片的宽度
- picHeight:100, // 单张预览图片的高度
- uploadDataFieldName:"upfile", // POST请求中图片数据的key
- picDescFieldName:'pictitle', // POST请求中图片描述的key
- maxSize:4, // 文件的最大体积,单位M
- compressSize:2, // 上传前如果图片体积超过该值，会先压缩,单位M
- maxNum:32, // 单次最大可上传多少个文件
- compressSide:0, //等比压缩的基准，0为按照最长边，1为按照宽度，2为按照高度
- compressLength:900 //能接受的最大边长，超过该值Flash会自动等比压缩
2：JS脚本
用来于处理外部相册选择，以及FLASH事件相应，以及调用FLASH上传功能来实现图片上传
/***********************Flash事件*****************************/
/**
* 检查flash状态
* @private
* @param {Object} target flash对象
* @return {Boolean}
*/
function _checkReady(target) {
if (typeof target !== 'undefined' && typeof target.flashInit !== 'undefined' && target.flashInit()) {
return true;
} else {
return false;
}
}
/**
* 创建一个随机的字符串
* @private
* @return {String}
*/
function _createString() {
var prefix = 'mw__flash__';
return prefix + Math.floor(Math.random() * 2147483648).toString(36);
}
/**
* 为传入的匿名函数创建函数名
* @private
* @param {String|Function} fun 传入的匿名函数或者函数名
* @return {String}
*/
function _createFunName(fun) {
var name = '';
name = _createString();
window[name] = function () {
fun.apply(window, arguments);
};
return name;
}
/***
反复判断Flash是欧加载完成,完成后为Flash添加回调函数..
*/
var interval = setInterval(function () {
try {
var flash = thisMovie("flash");
if (_checkReady(flash)) { //轮询flash的某个方法即可
var callBack = [];
callBack[0] = _createFunName(selectFileCallback);
callBack[1] = _createFunName(exceedFileCallback);
callBack[2] = _createFunName(deleteFileCallback);
callBack[3] = _createFunName(StartUploadCallback);
callBack[4] = _createFunName(uploadCompleteCallback);
callBack[5] = _createFunName(uploadErrorCallback);
callBack[6] = _createFunName(allCompleteCallback);
callBack[7] = _createFunName(changeHeightCallback);
thisMovie("flash").call('setJSFuncName', [callBack]);
clearInterval(interval);
}
}
catch (ex) {
}
}, 20);
//获得Flash对象
function thisMovie(movieName) {
if (navigator.appName.indexOf("Misrosoft") != -1) {
return window[movieName];
}
else {
return document[movieName];
}
}
3：一般处理程序：Upload.ashx
用来实现ASP.NET图片服务器保存
string state = "SUCCESS";
string URL = null;
string currentType = null;
string uploadpath = null;
string filename = null;
string originalName = null;
HttpPostedFile uploadFile = null;
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
context.Response.Write(UploadPoto(context));
}
#region 照片上传
public string UploadPoto(HttpContext context)
{
int aid = Convert.ToInt32(context.Request.Form["aid"]); //获得相册ID
bool mark = Convert.ToString(context.Request.Form["mark"]).ToLower() == "true"; //获得是否有水印
//上传配置
string pathbase = "Upload/" + aid.ToString(); //保存路径
int size = 2; //文件大小限制,单位MB
string[] filetype = { ".gif", ".png", ".jpg", ".jpeg", ".bmp" }; //文件允许格式
//上传图片
Hashtable info = new Hashtable();
info = upFile(context,pathbase, filetype, size, mark); //获取上传状态
string title = getOtherInfo(context,"pictitle"); //获取图片描述
string oriName = getOtherInfo(context,"fileName"); //获取原始文件名
string ret = "{'url':'" + info["url"] + "','title':'" + title + "','original':'" + oriName + "','state':'" + info["state"] + "'}";
return ret;
}
private Hashtable upFile(HttpContext context,string pathbase, string[] filetype, int size, bool mark)
{
pathbase = pathbase + "/";
uploadpath = context.Server.MapPath(pathbase);//获取文件上传路径
try
{
uploadFile = context.Request.Files[0];
originalName = uploadFile.FileName;
//目录创建
createFolder();
//格式验证
if (checkType(filetype))
{
state = "不允许的文件类型";
}
//大小验证
if (checkSize(size))
{
state = "文件大小超出网站限制";
}
//保存图片
if (state == "SUCCESS")
{
filename = reName();
string smallPath = reSmallName();
string waterPath = rePicName();
uploadFile.SaveAs(uploadpath + filename);
string savePath = uploadpath + filename;
ImageClass imageClass = new ImageClass();
if (imageClass.ShowThumbnail(savePath, uploadpath + smallPath, 640)) //如果有小图,则删除原图
{
FileInfo fi = new FileInfo(savePath);
fi.Delete();
URL = pathbase + smallPath;
filename = smallPath;
}
else
{
URL = pathbase + filename;
}
if (mark)
{
string watxt = "我是水印哈。。。";
if (ImageClass.WriterText(uploadpath + filename, uploadpath + waterPath, watxt))
{
URL = pathbase + waterPath;
filename = waterPath;
}
}
}
}
catch (Exception e)
{
state = "未知错误";
URL = "";
}
return getUploadInfo();
}
#endregion
#region 上传文件的辅助方法
/**
* 获取文件信息
* @param context
* @param string
* @return string
*/
protected string getOtherInfo(HttpContext context,string field)
{
string info = null;
if (context.Request.Form[field] != null && !String.IsNullOrEmpty(context.Request.Form[field]))
{
info = field == "fileName" ? context.Request.Form[field].Split(',')[1] : context.Request.Form[field];
}
return info;
}
/**
* 获取上传信息
* @return Hashtable
*/
protected Hashtable getUploadInfo()
{
Hashtable infoList = new Hashtable();
infoList.Add("state", state);
infoList.Add("url", URL);
if (currentType != null)
infoList.Add("currentType", currentType);
if (originalName != null)
infoList.Add("originalName", originalName);
return infoList;
}
/**
* 重命名文件
* @return string
*/
protected string reName()
{
return System.Guid.NewGuid() + getFileExt();
}
protected string reSmallName()
{
return System.Guid.NewGuid() + "_Small" + getFileExt();
}
protected string rePicName()
{
return System.Guid.NewGuid() + "_poto" + getFileExt();
}
/**
* 文件类型检测
* @return bool
*/
protected bool checkType(string[] filetype)
{
currentType = getFileExt();
return Array.IndexOf(filetype, currentType) == -1;
}
/**
* 文件大小检测
* @param int
* @return bool
*/
protected bool checkSize(int size)
{
return uploadFile.ContentLength >= (size * 1024 * 1024);
}
/**
* 获取文件扩展名
* @return string
*/
protected string getFileExt()
{
string[] temp = uploadFile.FileName.Split('.');
return "." + temp[temp.Length - 1].ToLower();
}
/**
* 按照日期自动创建存储文件夹
*/
protected void createFolder()
{
if (!Directory.Exists(uploadpath))
{
Directory.CreateDirectory(uploadpath);
}
}
#endregion
更详细的内容请参考源代码 ，对于有童鞋说不支持Chrome，我想应该是Flash的HTML编码问题，最近较忙，就不花时间去处理了。