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

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

阅读量：4606 次

发布时间：2019-06-09

本文共 8750 字，大约阅读时间需要 29 分钟。

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

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

最终效果图如下：

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

源代码下载路径为:

结构

1：FLASH文件：imageUploader.swf

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

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

URL编码转换功能，你可以通过这个工具实现。

原始值为:

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编码问题，最近较忙，就不花时间去处理了。

转载于:https://www.cnblogs.com/LuoYEYU/p/3898784.html

你可能感兴趣的文章