ajaxupload新版试用记录

前端之家收集整理的这篇文章主要介绍了ajaxupload新版试用记录前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近被老板安排去处理一个图片上传功能,于是自然想起了之前用过的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方法获取文件即可。

原文链接:https://www.f2er.com/ajax/166497.html

猜你在找的Ajax相关文章