上传(jquery.uploadify.js)

这篇博客记录了如何使用jQuery.uploadify.js这个JS插件进行文件上传操作,包括前端处理示例和后台程序的一般处理流程。

注:这是学习笔记!!!

首先引用js插件jquery.uploadify.js

以下是js处理范例,详细见官网

           //上传图片附件
           var folder = "/Upload/";
            $(".file_upload").uploadify({
                //'debug': false, //开启调试
                'auto': true,//是否自动上传
                'successTimeout': 99999, //超时时间
                'uploader': '/Areas/Inquiry/UploadImage.ashx',    //指定服务器端上传处理文件
                'buttonText': '上传文件',  //按钮名字
                'swf': "/Content/Uploadify/uploadify.swf",
                'overrideEvents': ['onDialogClose', 'onSelectError'],  //不执行默认的onSelect事件
                'queueID': 'showProgess',    //文件选择后的容器ID
                'fileObjName': 'Filedata',  //服务器端脚本使用的文件对象的名称 $_FILES个['upload']
                //'buttonImage': 'upbutton.gif',//浏览按钮的背景图片路径
                //浏览按钮的宽度
                'width': '80',
                'formData': { 'folder': folder, },
                'multi': true,  // 是否可上传多个
                //浏览按钮的高度+
                'height': '32',
                //'expressInstall': 'expressInstall.swf',//expressInstall.swf文件的路径。
                'fileTypeDesc': '支持的格式:',//在浏览窗口底部的文件类型下拉菜单中显示的文本
                //允许上传的文件后缀
                //任务 884: 使签章的报告正文支持pdf格式
                //'fileTypeExts': '*.docx;*.doc',
                //任务 1505: 在线委托2.0 流程测试第二轮 金融端问题综合
                'fileTypeExts': '*.jpg;*.gif;*.jpeg;*.png',        //上传文件的大小限制
                //任务 1505   end
                //end 884
                'fileSizeLimit': '50MB',
                'removeCompleted': true,  //自动将已完成任务从队列中删除
                'removeTimeout': 1,   //设置从队列移除的时间间隔
                'queueSizeLimit': 9,   //队列里数量
                //'checkExisting': true,
                //'cancelImg': '/Content/Uploadify/uploadify-cancel.png',  //3.2设置无效
                //'uploadLimit': 1,
                //每次更新上载的文件的进展
                'onUploadProgress': function (file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
                    //有时候上传进度什么想自己个性化控制,可以利用这个方法
                    //使用方法见官方说明
                },
                //选择上传文件后调用
                'onSelect': function (file) {

                },
                //返回一个错误,选择文件的时候触发
                'onSelectError': function (file, errorCode, errorMsg) {
                    switch (errorCode) {
                        case -100:
                            layer.alert("上传的文件数量已经超出系统限制的" + $('.file_upload').uploadify('settings', 'queueSizeLimit') + "个文件!");
                            break;
                        case -110:
                            layer.alert("文件 [" + file.name + "] 大小超出系统限制的" + $('.file_upload').uploadify('settings', 'fileSizeLimit') + "大小!");
                            break;
                        case -120:
                            layer.alert("文件 [" + file.name + "] 大小异常!");
                            break;
                        case -130:
                            layer.alert("文件 [" + file.name + "] 类型不正确!");
                            break;
                    }
                    return false;
                },
                //检测FLASH失败调用
                'onFallback': function () {
                    layer.alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。");
                },
                //上传到服务器,服务器返回相应信息到data里
                'onUploadSuccess': function (file, data, response) {
                     var imgSrc = folder + data;//当前图片路径,文件夹路径加图片名
                }
            });

以下是上传在后台一般程序里面的处理

public class UploadImage : IHttpHandler
    {
public void ProcessRequest(HttpContext context)
        {
            try
            {
                context.Response.ContentType = "text/plain";
                context.Response.Charset = "utf-8";

                //HttpPostedFile file = context.Request.Files["Filedata"];
                string uploadPath =
                    HttpContext.Current.Server.MapPath(@context.Request["folder"]) + "\\";

                if (context.Request.Files.Count > 0)
                {
                    HttpFileCollection files = context.Request.Files;
                    foreach (string key in files)
                    {
                        HttpPostedFile file = files[key];
                        if (!Directory.Exists(uploadPath))
                        {
                            Directory.CreateDirectory(uploadPath);
                        }
                        string fileExt = file.FileName.Substring(file.FileName.LastIndexOf('.'));
                        Random random = new Random();
                        var FileName = random.Next(10000000, 100000000);

                        file.SaveAs(uploadPath + FileName + fileExt);
                        //把现在上传的照片在服务端压缩成三档:高、中、低,默认分别为1024480120
                        //string sizeConfig = Biz.BLL.SystemBase.Common.GetConfigValue(Constant.SYS_Config.PHOTO_COMPRESS_SIZE);
                        //string[] size = sizeConfig.Split(',');
                        //ThumbnailHelper.MakeThumbnail(uploadPath + FileName + fileExt, uploadPath + FileName + "_H.jpg", Convert.ToInt32(size[0]), 0, "H");
                        //ThumbnailHelper.MakeThumbnail(uploadPath + FileName + fileExt, uploadPath + FileName + "_M.jpg", Convert.ToInt32(size[1]), 0, "M");
                        //ThumbnailHelper.MakeThumbnail(uploadPath + FileName + fileExt, uploadPath + FileName + "_L.jpg", Convert.ToInt32(size[2]), 0, "L");
                        context.Response.Write(FileName + fileExt);
                        //End 
                    }
                }
                else
                {
                    context.Response.Write("0");
                }
            }
            catch (Exception e)
            {
                LoggerHelper.Error("上传失败:", e);
                context.Response.Write("0");
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
        }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值