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


 

目录
相关文章
vue3 wangEditor富文本自定义上传本地图片
Vue3和WangEditor都提供了上传本地图片的功能,可以结合使用实现自定义上传本地图片。
1105 0
|
3月前
uniCloud + uView 上传图片,删除图片(含u-upload 组件的使用)
uniCloud + uView 上传图片,删除图片(含u-upload 组件的使用)
154 0
|
11月前
bootstrap+fileinput插件实现可预览上传照片功能
bootstrap+fileinput插件实现可预览上传照片功能
109 0
|
JavaScript
vsCode编辑器Vue使用el-upload上传组件标签名变成上传图标
vsCode编辑器Vue使用el-upload上传组件标签名变成上传图标
243 0
|
5月前
UEditor配置后端上传图片
UEditor配置后端上传图片
124 0
UEditor配置后端上传图片
|
5月前
uploadify组件文件上传那些事
uploadify组件文件上传那些事
62 0
|
JavaScript 对象存储
vue2.6,js集成oss后图片上传成功后,下载图片打开显示图片损坏
我确认本地上传的图片没问题,我用的put直传,拿到返回的url,换了几张图都这样
vue2.6,js集成oss后图片上传成功后,下载图片打开显示图片损坏
|
JavaScript 前端开发 API
【Vue】 前端上传图片时限制只可以按文件夹上传图片( webkitdirectory )
【Vue】 前端上传图片时限制只可以按文件夹上传图片( webkitdirectory )
【Vue】 前端上传图片时限制只可以按文件夹上传图片( webkitdirectory )
|
存储 NoSQL JavaScript
利用JQuery上传插件Uploadify实现图片上传MongoDB并预览
利用JQuery上传插件Uploadify实现图片上传MongoDB并预览
235 0
|
JavaScript
js实现上传图片前本地预览
js实现上传图片前本地预览
153 0