基于Jquery插件Uploadify实现实时显示进度条上传图片_jquery
先了解了解Uploadify,具体内容如下
Uploadify是一个简单易用的多文件上传
方案
气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载
。作为一个Jquery插件,Uploadify使用简单,并具有高度的定制性。
Uploadify特性:
Uploadify简单说来,是基于Jquery的一款文件上传插件。它的功能特色
总结
初级经济法重点总结下载党员个人总结TXt高中句型全总结.doc高中句型全总结.doc理论力学知识点总结pdf
如下: 1)、支持单文件或多文件上传,可控制并发上传的文件数
2)、在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java…… 3)、通过参数可配置上传文件类型及大小限制
4)、通过参数可配置是否选择文件后自动上传
5)、易于扩展,可控制每一步骤的回调函数(onSelect, onCancel……) 6)、通过接口参数和CSS控制外观
7)、提供上传进度的事件回调,实时显示上传进度
8)、开始之前要先下载插件安装包到本地并引用,详细实现请看代码注释,下面开始代码。 1、html代码
2、Javascript代码(关键部分)
$("#webApplogo").uploadify({
'uploader': 'js/uploadify-v2.1.4/uploadify.swf',//进度条,Uploadify里面含有
'script': 'UploadApplogo.ashx',//一般处理程序
'cancelImg': 'js/uploadify-v2.1.4/cancel.png',//取消图片路径
'folder': 'Imagelogo',//上传文件夹名
'auto': true, //文件添加到上传队列后,自动进行上传。默认为false
'multi': false,//是否允许多文件上传。默认为false
'fileExt':'*.gif;*.jpg;*.jpeg;*.png',//允许上传的文件类型,使用分号(”;)”分割 例如:*.jpg;*.gif,默认为null(所有文件类型)
'fileDesc':'不超过2M的图片 (*.gif;*.jpg;*.png)',
'sizeLimit': 2048000, //允许上传的文件大小(kb) 此为2M
'onSelectOnce': function(event,data) { //在单文件或多文件上传时,选择文件时触发
//event 事件对象(the event object)
//data 选择的操作信息
//data.filesSelected 选择文件操作中选中的文件数量
$('#status-message').text(data.filesSelected + ' 文件正在等待上传…….');
},
'onComplete': function(event, queueID, fileObj, response, data) {//当单个文件上传完成后触发
//event:事件对象(the event object)
//ID:该文件在文件队列中的唯一表示
//fileObj:选中文件的对象,他包含的属性列表
//response:服务器端返回的Response文本,我这里返回的是处理过的文件名称
//data:文件队列详细信息和文件上传的一般数据
alert("文件:" + fileObj.name + " 上传成功~");
//设置图片名称
$("#applogo").attr("value",response);
//设置输入框的值
$("#text_webApplogo").attr("value",fileObj.name);
//设置图片路径
$("#img_64").attr("src","Imagelogo/64_"+response);
$("#img_48").attr("src","Imagelogo/48_"+response);
$("#img_32").attr("src","Imagelogo/32_"+response);
$("#img_16").attr("src","Imagelogo/16_"+response);
//图片路径设置完成后,显示图片
$("#webApplogo_tab").css("display","block");
},
'onError': function(event, queueID, fileObj) {//当单个文件上传出错时触发
alert("文件:" + fileObj.name + " 上传失败~");
},
'buttonImg':'Images/bn_04.gif',//浏览按钮的图片路径
'width':60,//浏览按钮的宽和高
'height':24
,'queueID':'QID_webApplogo'//页面上作为文件上传队列的元素的ID
});
3、服务器端处理文件上传
///
/// 上传文件
/// // www.mntuku.cn
public class UploadApplogo : IHttpHandler
{
System.Drawing.Image image, image64, image48, image32, image16; //定义image类的对象
protected string imagePath;//图片路径
protected string imageType;//图片类型
protected string imageName;//图片名称
protected string fileName;//图片名称
//提供一个回调
方法
快递客服问题件处理详细方法山木方法pdf计算方法pdf华与华方法下载八字理论方法下载
,用于确定Image对象在执行生成缩略图操作时何时提前取消执行
//如果此方法确定 GetThumbnailImage 方法应提前停止执行,则返回 true;否则返回 false
System.Drawing.Image.GetThumbnailImageAbort callb = null;
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
HttpPostedFile UploadImage = context.Request.Files["FileData"];
//物理路径
string uploadpath =
HttpContext.Current.Server.MapPath(context.Request["folder"] + "\\");
if (UploadImage != null)
{
//是否有目录,如没有就创建
if (!Directory.Exists(uploadpath))
{
Directory.CreateDirectory(uploadpath);
}
//客户端文件完全名称
string filename = UploadImage.FileName;
string extname = filename.Substring(filename.LastIndexOf(".") + 1);
//为不重复,设置文件名
fileName = Guid.NewGuid().ToString() + "." + extname;
//context.Response.Write("1");
context.Response.Write(fileName);
}
else
{
context.Response.Write("0");
}
string mPath;
imagePath = UploadImage.FileName;
//取得图片类型
imageType = imagePath.Substring(imagePath.LastIndexOf(".") + 1);
//取得图片名称
imageName = imagePath.Substring(imagePath.LastIndexOf("\\") + 1);
Stream imgStream = UploadImage.InputStream;//流文件,准备读取上载文件的内容
int imgLen = UploadImage.ContentLength;//上载文件大小
//建立虚拟路径
mPath = HttpContext.Current.Server.MapPath(context.Request["folder"]);
//保存到虚拟路径
UploadImage.SaveAs(mPath + "\\" + fileName);
////显示原图
//imageSource.ImageUrl = "upFile/" + imageName;
//为上传的图片建立引用
image = System.Drawing.Image.FromFile(mPath + "\\" + fileName);
//生成缩略图
image64 = image.GetThumbnailImage(64, 64, callb, new System.IntPtr());
//把缩略图保存到指定的虚拟路径
image64.Save(HttpContext.Current.Server.MapPath(context.Request["folder"]) + "\\64_" + fileName);
//释放image64对象的资源
image64.Dispose();
//生成缩略图
image48 = image.GetThumbnailImage(48, 48, callb, new System.IntPtr());
image48.Save(HttpContext.Current.Server.MapPath(context.Request["folder"]) + "\\48_" + fileName);
image48.Dispose();
//生成缩略图
image32 = image.GetThumbnailImage(32, 32, callb, new System.IntPtr());
image32.Save(HttpContext.Current.Server.MapPath(context.Request["folder"]) + "\\32_" + fileName);
image32.Dispose();
//生成缩略图
image16 = image.GetThumbnailImage(16, 16, callb, new System.IntPtr());
image16.Save(HttpContext.Current.Server.MapPath(context.Request["folder"]) + "\\16_" + fileName);
image16.Dispose();
//释放image对象占用的资源
image.Dispose();
}
public bool IsReusable
{
get
{
return false;
}
}
}
4、效果如下
以上就是本文的全部内容,希望对大家的学习有所帮助。