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(