uploadify图片上传插件使用实例-阿里云开发者社区

开发者社区> fuyifang> 正文

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}");
        }
       
    }


 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《ANSYS Workbench有限元分析实例详解(静力学)》——导读
CAE是计算机辅助求解复杂工程和产品结构各项性能和优化设计等问题的一种近似数值分析方法,适用于工程的整个生命周期。ANSYS软件是最经典的CAE软件之一,在国内应用广泛。近些年ANSYS公司收购了多款顶级流体、电磁类软件,并重点发展ANSYS Workbench平台。
10499 0
JS导出PDF插件(支持中文、图片使用路径)
原文:JS导出PDF插件(支持中文、图片使用路径) 在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfmake,很好地解决了此问题。它的效果可以先到http://pdfmake.org/playground.html查看。
1700 0
分享22款响应式的 jQuery 图片滑块插件
  响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验。这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助你在 Web 项目中实现有吸引力的图片滑块效果。
1088 0
HTML5 FormData实现文件上传实例
原文:HTML5 FormData实现文件上传实例 表单提交,文件上传是一个常用又十分麻烦的功能,以前要上传文件通常都是借助插件或者flash来实现,噼里啪啦的加载一大堆东西。自从有了HTML5的FormData后,老板再也不用担心我的上传了。
1188 0
jQuery 写的插件图片上下切换幻灯效果
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
576 0
+关注
fuyifang
携程旅行网技术研发中心资深研发工程师,研发Leader;CSDN博客专家;
260
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载