首页 > 学院 > 开发设计 > 正文

FLASH图片上传功能—从百度编辑器UEditor里面提取出来

2019-11-17 01:40:57
字体:
来源:转载
供稿:网友

Flash图片上传功能—从百度编辑器UEditor里面提取出来

为了记录工作中碰到的各种问题,以及学习资料整理,今天开始,将以往的文章进行了一个整理,以后也开始认真的记录学习过程中的各种问题

在HTML里面的文件上传功能一直是个问题,为了实现上传文件大小限制,怎样显示进度条问题,以及上传前图片预览,也试过各种办法,直到有一天看到百度编辑器中的图片上传功能。花了点功夫把他单独提取出来。

最终效果图如下:

这个功能可以提供多个图片文件选择,预览,然后对上传的图片在上传队列中删除,以及旋转和,上传中进度条显示,以及上传相册的选择。%20

源代码下载路径为:http://pan.baidu.com/s/13iNYw

结构

1:FLASH文件:imageUploader.swf%20

用来显示上传队列,并提供图片增加,预览,删除,旋转,以及进度条的显示功能!

包括了一些参数设置,例如上传处理程序,以及相关的属性设置。其中最重要参数为:flashvars,%20他的值经过URL编码。

URL编码转换功能,你可以通过http://tool.chinaz.com/Tools/URLEncode.aspx%20这个工具实现。

原始值为:

container=flashContainer&url=/BaiduUE/imageUp&ext={"param1":"value1",%20"param2":"value2"}&fileType={"description":"图片",%20"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(
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表