ajaxupload新版试用记录

来源:互联网 发布:mac sdk manager 编辑:程序博客网 时间:2024/05/01 15:30

最近被老板安排去处理一个图片上传的功能,于是自然想起了之前用过的ajaxupload插件,于是乎开始各种搜索,无赖发现该插件在gitub上更改位置,更为郁闷的是插件代码被重新整理过,以前的一些使用方法问题不断。好吧,让我重新学习一下新版本的ajaxupload吧。


首先,找到ajaxupload的官网 http://fineuploader.com/ 。下载需要的js和css。


官网上有比较详细的代码示例,演示效果也有,但是坑爹的是没告诉咱使用过程中几个问题?我总结一下,使用中可能会遇到如下问题:


1、如何配置插件?

2、如何传参给后台?包括传递静态值传递和动态值传递。

3、后台如何获取文件对象?


很显然,上述3个问题是使用ajaxupload最基本的问题。下面将大概介绍相关问题的示例代码:


1、前端完整代码:

  <script type="text/javascript" src="../../Scripts/jquery-1.9.1.min.js"></script>
       <script type="text/javascript" src="../../Scripts/jquery.fineuploader-3.4.1.js"></script>
       <link href="../../Scripts/fineuploader-3.4.1.css" rel="stylesheet" type="text/css"/>


    <div id="fine-uploader-basic" class="btn btn-success" style="width:100px;height:20px;text-align:center;">
      上传图片文件
    </div>
    <div id="messages"></div>
 
    <script>
        $(document).ready(function () {
            $fub = $('#fine-uploader-basic');
            $messages = $('#messages');
            //params以对象的形式向后台传递参数,参数个数与对应的处理器要对应
            /*  下面是request的默认各项设置的值,可以根据需要将对应的选项进行设置。
            在后台用httpfile对象取文件时,默认是使用qqfile的键值
            request: {
            endpoint: '/server/upload',
            params: {},
            paramsInBody: true,
            customHeaders: {},
            forceMultipart: true,
            inputName: 'qqfile',
            uuidName: 'qquuid',
            totalFileSizeName: 'qqtotalfilesize'
            }
            */
            var uploader = new qq.FineUploaderBasic({
                button: $fub[0],
                request: {
                    endpoint: '/Home/ChargePicture',
                    params: {fname:'file_name'}
                },
                validation: {
                    allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
                    sizeLimit: 204800 // 200 kB = 200 * 1024 bytes
                },
                callbacks: {
                    onSubmit: function (id, fileName) {


                        $messages.append('<div id="file-' + id + '" class="alert" style="margin: 20px 0 0"></div>');
                    },
                    onUpload: function (id, fileName) {
                        $('#file-' + id).addClass('alert-info')
                              .html('Innitializing ' + '“' + fileName + '”');
                    },
                    onProgress: function (id, fileName, loaded, total) {
                        if (loaded < total) {
                            progress = Math.round(loaded / total * 100) + '% of ' + Math.round(total / 1024) + ' kB';
                            $('#file-' + id).removeClass('alert-info')
                                .html('Uploading ' +
                                      '“' + fileName + '” ' +
                                      progress);
                        } else {
                            $('#file-' + id).addClass('alert-info')
                                .html('Saving ' +
                                      '“' + fileName + '”');
                        }
                    },
                    onComplete: function (id, fileName, responseJSON) {
                        if (responseJSON.success) {
                            $('#file-' + id).removeClass('alert-info')
                                .addClass('alert-success')
                                .html('<i class="icon-ok"></i> ' +
                                      'Successfully saved ' +
                                      '“' + fileName + '<img src="'+'/pics/'+fileName+'" />');
                        } else {
                            $('#file-' + id).removeClass('alert-info')
                                .addClass('alert-error')
                                .html('<i class="icon-exclamation-sign"></i> ' +
                                      'Error with ' +
                                      '“' + fileName + '”: ' +
                                      responseJSON.error);
                        }
                    }
                }
            });
        });
    </script>

2、asp.net mvc 2.0后台处理代码

public JsonResult ChargePicture(string fname)
        {
            if (uploadPicture(fname) == 0)
            {
                //将处理结果打包成json格式,然后返回,json包,其中要有对是否处理成功的状态值的说明,之前用200不行
                var response = new
                {
                    success = true
                };
                return Json(response); 
            }
            else
            {
                var response = new
                {
                    success = false
                };
                return Json(response); 
            }
             
        }
        public int uploadPicture(string fname)   //处理ajax上传文件请求的
        {
            //string merchant_id = Session["merchant_id"].ToString();
            try
            {
                string SaveURLImge = "~/pics/";
                int count = Request.Files.Count;


                //这里使用的key值默认为”qqfile“,需要更改的话在前端进行更改
                HttpPostedFileBase hpfFile = Request.Files["qqfile"];
                if (hpfFile!=null && hpfFile.FileName != "")
                {
                    string realFileName = Path.GetFileName(hpfFile.FileName);
                    // hpfFile.SaveAs(Server.MapPath("~/elifeImages/dishImages/000/") + dishID + ".jpg");
                    hpfFile.SaveAs(Server.MapPath(SaveURLImge) + realFileName);
                    return 0;
                }
                else
                {
                    return 1;
                }
            }
            catch (Exception ex)
            {
                // return ex.Message;
                return -1;
            }
        }
        ///生成缩略图 
        /// </summary> 
        /// <param name="originalImagePath">源图路径(物理路径)</param> 
        /// <param name="thumbnailPath">缩略图路径(物理路径)</param> 
        /// <param name="width">缩略图宽度</param> 
        /// <param name="height">缩略图高度</param> 
        /// <param name="mode">生成缩略图的方式</param>  
        public static void MakeThumbnail(string originalImagePath, string thumbnailPath, int width, int height, string mode)
        {
            System.Drawing.Image originalImage = System.Drawing.Image.FromFile(originalImagePath);


            int towidth = width;
            int toheight = height;


            int x = 0;
            int y = 0;
            int ow = originalImage.Width;
            int oh = originalImage.Height;


            if (ow < towidth && oh < toheight)
            {
                originalImage.Save(thumbnailPath);
            }
            else
            {


                switch (mode.ToUpper())
                {
                    case "HW"://指定高宽缩放(可能变形)          
                        break;
                    case "W"://指定宽,高按比例            
                        toheight = originalImage.Height * width / originalImage.Width;
                        break;
                    case "H"://指定高,宽按比例 
                        towidth = originalImage.Width * height / originalImage.Height;
                        break;
                    case "CUT"://指定高宽裁减(不变形)          
                        if ((double)originalImage.Width / (double)originalImage.Height > (double)towidth / (double)toheight)
                        {
                            oh = originalImage.Height;
                            ow = originalImage.Height * towidth / toheight;
                            y = 0;
                            x = (originalImage.Width - ow) / 2;
                        }
                        else
                        {
                            ow = originalImage.Width;
                            oh = originalImage.Width * height / towidth;
                            x = 0;
                            y = (originalImage.Height - oh) / 2;
                        }
                        break;
                    case "AUTO": //自动适应高度 
                        if (ow > oh)
                        {
                            //newwidth = 200; 
                            toheight = (int)((double)oh / (double)ow * (double)towidth);
                        }
                        else
                        {
                            //newheight = 200; 
                            towidth = (int)((double)ow / (double)oh * (double)toheight);
                        }
                        break;
                    default:
                        break;
                }


                //新建一个bmp图片 
                System.Drawing.Image bitmap = new System.Drawing.Bitmap(towidth, toheight);


                //新建一个画板 
                System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap);


                //设置高质量插值法 
                g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;


                //设置高质量,低速度呈现平滑程度 
                g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;


                //清空画布并以透明背景色填充 
                g.Clear(System.Drawing.Color.Transparent);


                //在指定位置并且按指定大小绘制原图片的指定部分 
                g.DrawImage(originalImage, new System.Drawing.Rectangle(0, 0, towidth, toheight),
                    new System.Drawing.Rectangle(x, y, ow, oh),
                    System.Drawing.GraphicsUnit.Pixel);


                try
                {
                    //以jpg格式保存缩略图 
                    bitmap.Save(thumbnailPath, System.Drawing.Imaging.ImageFormat.Jpeg);


                }
                catch (System.Exception e)
                {
                    throw e;
                }
                finally
                {


                    bitmap.Dispose();
                    g.Dispose();
                }
            }
            originalImage.Dispose();
        }

备注:ajaxupload的使用在前端代码中有详细备注,后台获取图片文件代码处也有备注。PHP的话同样以http的get方法获取文件即可。