首页 >

织梦DedeCMS前台上传参考jQuery Uploadify 3.2上传插件使用

织梦DedeCMS前台上传参考jQuery Uploadify 3.2上传插件使用

下载下来解压后估计里面很多文件,其实有用的也就一个jquery.uploadify.js和uploadify.swf这两个文件。当然啦,jQuery库那是必须的。

在你使用的项目中,把jquery.uploadify.js引入以后,用法和大多数JQ插件一样。同时也要记得引入swfobject.js这个插件,版本2.2以上的。使用方法例如:

$(function() {    $("#file_upload_1").uploadify({        height        : 30,        swf           : '/uploadify/uploadify.swf',        uploader      : '/uploadify/UploadHandler.ashx',        width         : 120    });});


,上面的只是简单的事例,下面就把在项目中做的发出来,每个都有解释:file_upload_1其实也就是一个容器ID,比如

$(document).ready(function() {    $("#file_upload").uploadify({        //开启调试        'debug' : false,        //是否自动上传        'auto':false,        //超时时间        'successTimeout':99999,        //附带值        'formData':{            'userid':'用户id',            'username':'用户名',            'rnd':'加密密文'        },        //flash        'swf': "uploadify.swf",        //不执行默认的onSelect事件        'overrideEvents' : ['onDialogClose'],        //文件选择后的容器ID        'queueID':'uploadfileQueue',        //服务器端脚本使用的文件对象的名称 $_FILES个['upload']        'fileObjName':'upload',        //上传处理程序        'uploader':'imageUpload.php',        //浏览按钮的背景图片路径        'buttonImage':'upbutton.jpg',        //浏览按钮的宽度        'width':'100',        //浏览按钮的高度        'height':'32',        //expressInstall.swf文件的路径。        'expressInstall':'expressInstall.swf',        //在浏览窗口底部的文件类型下拉菜单中显示的文本        'fileTypeDesc':'支持的格式:',        //允许上传的文件后缀        'fileTypeExts':'*.jpg;*.jpge;*.jpg;*.jpg',        //上传文件的大小限制        'fileSizeLimit':'3MB',        //上传数量        'queueSizeLimit' : 25,        //每次更新上载的文件的进展        'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {             //有时候上传进度什么想自己个性化控制,可以利用这个方法             //使用方法见官方说明        },        //选择上传文件后调用        'onSelect' : function(file) {                            },        //返回一个错误,选择文件的时候触发        'onSelectError':function(file, errorCode, errorMsg){            switch(errorCode) {                case -100:                    alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件!");                    break;                case -110:                    alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小!");                    break;                case -120:                    alert("文件 ["+file.name+"] 大小异常!");                    break;                case -130:                    alert("文件 ["+file.name+"] 类型不正确!");                    break;            }        },        //检测FLASH失败调用        'onFallback':function(){            alert("NI未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。");        },        //上传到服务器,服务器返回相应信息到data里        'onUploadSuccess':function(file, data, response){            alert(data);        }    });});


上传后台处理程序UploadHandler.ashx:大体上常用的想也就这些,至于后端处理上传部分,这里就不多讲了,和普通的文件上传处理方式是一样的。

///     /// UploadHandler 的摘要说明    ///     public class UploadHandler : IHttpHandler    {        public void ProcessRequest(HttpContext context)        {            try            {                context.Response.ContentType = "text/plain";                //接收上传后的文件                HttpPostedFile file = context.Request.Files["Filedata"];                //其他参数                //string somekey = context.Request["someKey"];                //string other = context.Request["someOtherKey"];                //获取文件的保存路径                //string uploadPath = HttpContext.Current.Server.MapPath("UploadImages" + "\\");                string uploadPath = context.Request.Form["uploadPath"];                //没有指定上传路径,则使用默认路径                if (string.IsNullOrEmpty(uploadPath) || uploadPath == "")                {                    uploadPath = string.Format("/upload/images/{0}/{1}/", DateTime.Now.Year, DateTime.Now.Month.ToString("D2"));                }                string fullUploadPath = HttpContext.Current.Server.MapPath(uploadPath);                //判断上传的文件是否为空                if (file != null)                {                    if (!Directory.Exists(fullUploadPath))                    {                        Directory.CreateDirectory(fullUploadPath);                    }                    //文件名                    string _filename = context.Request.Form["uploadFileName"];                    //没有指定文件名,则生成一个随机文件名                    if (string.IsNullOrEmpty(_filename) || _filename == "")                    {                        DateTime _temDT = DateTime.Now;                        //扩展名                        string sExt = file.FileName.Substring(file.FileName.LastIndexOf(".")).ToLower();                        //生成随机数                        int digit = 6;                        Random _rnd = new Random();                        string rnd = _rnd.Next((int)Math.Pow(10, digit), (int)Math.Pow(10, digit + 1)).ToString();                        //文件名                        _filename = string.Format("{0}{1}{2}", _temDT.Ticks.ToString(), rnd, sExt);                    }                    //保存文件                    file.SaveAs(fullUploadPath + _filename);                    context.Response.Write(string.Format("{{\"code\":\"1\",\"msg\":\"上传成功\",\"filePath\":\"{0}\",\"fileName\":\"{1}\"}}", uploadPath + _filename, _filename));                }                else                {                    context.Response.Write("{{\"code\":\"0\",\"msg\":\"没有要上传的文件!\"}}");                }            }            catch (Exception ex)            {                context.Response.Write(string.Format("{{\"code\":\"0\",\"msg\":\"{0}\"}}", ex.Message));            }            finally            {                context.Response.End();            }        }        public bool IsReusable        {            get            {                return false;            }        }    }



织梦DedeCMS前台上传参考jQuery Uploadify 3.2上传插件使用
  • 织梦DedeCMS实现多选框全选/取消方法
  • 织梦DedeCMS实现多选框全选/取消方法 | 织梦DedeCMS实现多选框全选/取消方法 ...

    织梦DedeCMS前台上传参考jQuery Uploadify 3.2上传插件使用
  • 织梦DedeCMS搬家后路径变化批量替换图片路径避免图片不能正常显示
  • 织梦DedeCMS搬家后路径变化批量替换图片路径避免图片不能正常显示 | 织梦DedeCMS搬家后路径变化批量替换图片路径避免图片不能正常显示 ...

    织梦DedeCMS前台上传参考jQuery Uploadify 3.2上传插件使用
  • 织梦DedeCMS网站系统设置说明:核心设置
  • 织梦DedeCMS网站系统设置说明:核心设置 | 织梦DedeCMS网站系统设置说明:核心设置 ...