uploadify图片上传插件使用实例

简介: 1、uploadify插件库引用 2、uploadify应用代码 $('#uploadify').uploadify({ 'uploader': '.

1、uploadify插件库引用

<script src="../js/uploadify/swfobject.js" type="text/javascript"></script>
<script src="../js/uploadify/jquery.uploadify.v2.1.4.js" type="text/javascript"></script>

2、uploadify应用代码

 $('#uploadify').uploadify({
                'uploader': '../js/uploadify/uploadify.swf', //指定上传控件的主体文件
                'script': 'Handler/UpAdImg.ashx', //指定服务器端上传处理文件
                'scriptData': { 'uptype': 'Upload', 'option': 'GoodsImgUpdate' },
                'cancelImg': '../js/uploadify/cancel.png', //指定取消上传的图片
                'auto': true, //选定文件后是否自动上传
                'fileExt': '*.jpg;*.gif;*.png;*.pdf;*.rar;*.zip;*.exe;*.xls;*.xlsx;*.ppt;*.pptx;*.doc;*.docx;', //控制可上传文件的扩展名,启用本项时需同时声明filedesc
                'fileDesc': '图片格式(*.jpg;*.gif;*.png;*.pdf;*.rar;*.zip;*.exe;)', //出现在上传对话框中的文件类型描述
                'buttonText': '上传图片', //浏览按钮的文本
                'sizelimit': 824288000, //控制上传文件的大小,单位byte
                'multi': true, //是否允许同时上传多文件
                'onComplete': function (event, queueId, fileObj, response, data) {
                    var resultJson = eval("(" + response + ")");
                    if (resultJson.success == true) {
                        var li = $("<li>" +
                                        "<input name=\"hd_upimgId\" type=\"hidden\" value=\"0\" /><input name=\"hd_FileName\" type=\"hidden\" value=\"" + resultJson.src + "\" /><input name=\"HD_ImageType\"  type=\"hidden\" id=\"HD_ImageType\" value=''/>" +
                                        "<div class=\"jPic\"><span><img src=\"" + resultJson.url + "\"  width='160' height='160' /></span><i class=\"webNo\"></i></div>" +
                                        "<div class=\"jwz\"><div class=\"w1\">名称:<input name=\"txtTitle\" class=\"jbox\" type=\"text\" value='" + resultJson.title + "'/></div><div class=\"w1\">说明:<input name=\"txtRemark\" class=\"jbox\" id=\"txtRemark\" type=\"text\"/></div><div class=\"jBtn\"><i class=\"fx\" ><input  type=\"checkbox\" /></i><a class=\"prev\" href=\"javascript:void(0);\"><img src='../images/inc/left.png' border='0' /></a><a class=\"del\" href=\"javascript:void(0);\"><img src='../images/inc/del.png' border='0' /></a><a class=\"next\" href=\"javascript:void(0);\"><img src='../images/inc/right.png' border='0' class=\"next\"/></a></div></div>" +
                                     
                                   "</li>");


                        bindImageItemEvent(li);
                        $("#imageList").append(li);
                    }
                }
            });

 

3、file控件代码

   <td style="width: 130px;"><input id="uploadify" name="uploadify" type="file" /></td>

 

4、一般处理文件

 public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        context.Response.Charset = "utf-8";
        var HttpFile = context.Request.Files["Filedata"];
        if (HttpFile != null)
        {
            var allowedExt = new List<string> { ".jpg", ".gif", ".bmp", ".png" };
            var fileExt = Path.GetExtension(HttpFile.FileName).ToLower();
            var File_Name = Path.GetFileNameWithoutExtension(HttpFile.FileName);

            var uptype = context.Request["uptype"];
            var option = context.Request["option"];
            if (uptype.ToString().Trim().Equals("Upload"))
            {

                var toFileName = Guid.NewGuid().ToString() + fileExt;
                var toFileFullPath = RouteHelp.GoodsSavePath + "\\";
                var viewPath = RouteHelp.GoodsImgUrl + "\\";
                var Title = File_Name;
                DirectoryInfo di = new DirectoryInfo(toFileFullPath);
                if (!di.Exists)
                {
                    di.Create();
                }
                string saveFile = toFileFullPath + "D" + toFileName;
                HttpFile.SaveAs(saveFile);

                //大缩略图
                string bigThumbPath = toFileFullPath + "X" + toFileName;
                MakeThumbnail(saveFile, bigThumbPath, 430, 430, "Cut ");
                //小缩略图
                string smallThumbPath = toFileFullPath + toFileName;
                MakeThumbnail(saveFile, smallThumbPath, 177, 177, "Cut ");
                string imgeUrl = "";
                if (fileExt.ToLower().Equals(".jpg") || fileExt.ToLower().Equals(".gif") || fileExt.ToLower().Equals(".bmp") || fileExt.ToLower().Equals(".png"))
                {
                    imgeUrl = viewPath + toFileName;
                }
                else
                {
                    context.Response.Write("{success:false,msg:'只能上传图片类型的文件'}");
                    context.Response.End();
                    return;
                }

                AddImgToCookie(toFileName, toFileName, Title, option);
                context.Response.Write("{success:true,url:'" + RouteHelp.GoodsImgUrl + "/" + toFileName + "',src:'" + toFileName + "',title:'" + Title + "'}");
            }
            else
            {
                context.Response.Write("{success:false}");
            }

        }
        else
        {
            context.Response.Write("{success:false}");
        }
       
    }


 

目录
相关文章
|
人工智能 搜索推荐
阿里语音AI提供了个性化人声定制功能
【2月更文挑战第24天】阿里语音AI提供了个性化人声定制功能
1302 2
|
10月前
|
存储 物联网 数据处理
什么数据中心最好?盘点全球十大数据中心!
在数字时代,数据中心作为关键基础设施,支撑着商业和社会的高效运转。从AWS、谷歌、微软到阿里云、苹果等巨头的数据中心,它们各具特色,涵盖高性能计算、液冷技术、绿色节能和高安全性等领域。这些“超级堡垒”不仅保障了在线交易、远程教育、智慧医疗等服务的稳定运行,还推动了云计算、大数据和物联网的发展,极大提升了社会效率和生活质量。每个数据中心根据自身优势,在不同应用场景中发挥着不可替代的作用,共同构建了数字化世界的基石。
1231 1
|
JSON 搜索推荐 API
京东店铺所有商品接口系列(京东 API)
本文介绍如何使用Python调用京东API获取店铺商品信息。前期需搭建Python环境,安装`requests`库并熟悉`json`库的使用。接口采用POST请求,参数包括`app_key`、`method`、`timestamp`、`v`、`sign`和业务参数`360buy_param_json`。通过示例代码展示如何生成签名并发送请求。应用场景涵盖店铺管理、竞品分析、数据统计及商品推荐系统,帮助商家优化运营和提升竞争力。
444 23
|
存储 大数据 Linux
文件系统EXT3,EXT4和XFS的区别
通过上述分析,我们可以看出,选择哪种文件系统需依据具体的应用需求而定,无论是寻求稳定性与兼容性的EXT3,追求高性能与扩展性的EXT4,还是面向大数据处理优化的XFS,各有千秋。正确评估业务需求,方能做出最适合的选择。
816 2
|
Kubernetes 架构师 算法
阿里面试:全国14亿人,统计出重名最多的前100个姓名
文章介绍了如何解决“从全国14亿人的数据中统计出重名人数最多的前100位姓名”的面试题,详细分析了多种数据结构的优缺点,最终推荐使用前缀树(Trie)+小顶堆的组合。文章还提供了具体的Java代码实现,并讨论了在内存受限情况下的解决方案,强调了TOP N问题的典型解题思路。最后,鼓励读者通过系统化学习《尼恩Java面试宝典》提升面试技巧。
阿里面试:全国14亿人,统计出重名最多的前100个姓名
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的在线学习系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的在线学习系统的详细设计和实现
208 0
|
数据安全/隐私保护
硬盘坏道如何检测和修复?
本文介绍了硬盘坏道的概念,包括逻辑坏道和物理坏道的区别,并提供了使用DiskGenius检测和修复坏道的步骤。当硬盘出现坏道且包含重要数据时,应立即备份数据,使用数据恢复软件,或在严重情况下寻求专业帮助。保护和恢复数据是应对硬盘坏道的关键。
|
传感器 物联网 数据处理
MQTT 和 EMQX到底有啥区别?
MQTT 和 EMQX到底有啥区别?
3711 3
MQTT 和 EMQX到底有啥区别?
ModelScope-FunASR的WebSocket连接中断后,服务端不会自动关闭连接
ModelScope-FunASR的WebSocket连接中断后,服务端不会自动关闭连接【1月更文挑战第11天】【1月更文挑战第55篇】
598 2
|
新零售 监控 供应链
【迪卡侬中国】人货“双轮驱动”下的数字化转型,支撑生意确定性增长
【迪卡侬中国】人货“双轮驱动”下的数字化转型,支撑生意确定性增长
975 0