最近被老板安排去处理一个图片上传的功能,于是自然想起了之前用过的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,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,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方法获取文件即可。 (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|