最近被老板安排去处理一个图片上传的功能，于是自然想起了之前用过的ajaxupload插件，于是乎开始各种搜索，无赖发现该插件在gitub上更改位置，更为郁闷的是插件代码被重新整理过，以前的一些使用方法问题不断。好吧，让我重新学习一下新版本的ajaxupload吧。
首先，找到ajaxupload的官网http://fineuploader.com/@H_403_7@ 。下载需要的js和css。
官网上有比较详细的代码示例，演示效果也有，但是坑爹的是没告诉咱使用过程中几个问题？我总结一下，使用中可能会遇到如下问题：
1、如何配置插件？
很显然，上述3个问题是使用ajaxupload最基本的问题。下面将大概介绍相关问题的示例代码：
1、前端完整代码：
@H_403_7@<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>
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