注:这是学习笔记!!!
首先引用js插件jquery.uploadify.js
以下是js处理范例,详细见官网
//上传图片附件
var folder = "/Upload/";
$(".file_upload").uploadify({
//'debug': false, //开启调试
'auto': true,//是否自动上传
'successTimeout': 99999, //超时时间
'uploader': '/Areas/Inquiry/UploadImage.ashx', //指定服务器端上传处理文件
'buttonText': '上传文件', //按钮名字
'swf': "/Content/Uploadify/uploadify.swf",
'overrideEvents': ['onDialogClose', 'onSelectError'], //不执行默认的onSelect事件
'queueID': 'showProgess', //文件选择后的容器ID
'fileObjName': 'Filedata', //服务器端脚本使用的文件对象的名称 $_FILES个['upload']
//'buttonImage': 'upbutton.gif',//浏览按钮的背景图片路径
//浏览按钮的宽度
'width': '80',
'formData': { 'folder': folder, },
'multi': true, // 是否可上传多个
//浏览按钮的高度+
'height': '32',
//'expressInstall': 'expressInstall.swf',//expressInstall.swf文件的路径。
'fileTypeDesc': '支持的格式:',//在浏览窗口底部的文件类型下拉菜单中显示的文本
//允许上传的文件后缀
//任务 884: 使签章的报告正文支持pdf格式
//'fileTypeExts': '*.docx;*.doc',
//任务 1505: 在线委托2.0 流程测试第二轮 金融端问题综合
'fileTypeExts': '*.jpg;*.gif;*.jpeg;*.png', //上传文件的大小限制
//任务 1505 end
//end 884
'fileSizeLimit': '50MB',
'removeCompleted': true, //自动将已完成任务从队列中删除
'removeTimeout': 1, //设置从队列移除的时间间隔
'queueSizeLimit': 9, //队列里数量
//'checkExisting': true,
//'cancelImg': '/Content/Uploadify/uploadify-cancel.png', //3.2设置无效
//'uploadLimit': 1,
//每次更新上载的文件的进展
'onUploadProgress': function (file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
//有时候上传进度什么想自己个性化控制,可以利用这个方法
//使用方法见官方说明
},
//选择上传文件后调用
'onSelect': function (file) {
},
//返回一个错误,选择文件的时候触发
'onSelectError': function (file, errorCode, errorMsg) {
switch (errorCode) {
case -100:
layer.alert("上传的文件数量已经超出系统限制的" + $('.file_upload').uploadify('settings', 'queueSizeLimit') + "个文件!");
break;
case -110:
layer.alert("文件 [" + file.name + "] 大小超出系统限制的" + $('.file_upload').uploadify('settings', 'fileSizeLimit') + "大小!");
break;
case -120:
layer.alert("文件 [" + file.name + "] 大小异常!");
break;
case -130:
layer.alert("文件 [" + file.name + "] 类型不正确!");
break;
}
return false;
},
//检测FLASH失败调用
'onFallback': function () {
layer.alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。");
},
//上传到服务器,服务器返回相应信息到data里
'onUploadSuccess': function (file, data, response) {
var imgSrc = folder + data;//当前图片路径,文件夹路径加图片名
}
});
以下是上传在后台一般程序里面的处理
public class UploadImage : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
try
{
context.Response.ContentType = "text/plain";
context.Response.Charset = "utf-8";
//HttpPostedFile file = context.Request.Files["Filedata"];
string uploadPath =
HttpContext.Current.Server.MapPath(@context.Request["folder"]) + "\\";
if (context.Request.Files.Count > 0)
{
HttpFileCollection files = context.Request.Files;
foreach (string key in files)
{
HttpPostedFile file = files[key];
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
string fileExt = file.FileName.Substring(file.FileName.LastIndexOf('.'));
Random random = new Random();
var FileName = random.Next(10000000, 100000000);
file.SaveAs(uploadPath + FileName + fileExt);
//把现在上传的照片在服务端压缩成三档:高、中、低,默认分别为1024、480、120
//string sizeConfig = Biz.BLL.SystemBase.Common.GetConfigValue(Constant.SYS_Config.PHOTO_COMPRESS_SIZE);
//string[] size = sizeConfig.Split(',');
//ThumbnailHelper.MakeThumbnail(uploadPath + FileName + fileExt, uploadPath + FileName + "_H.jpg", Convert.ToInt32(size[0]), 0, "H");
//ThumbnailHelper.MakeThumbnail(uploadPath + FileName + fileExt, uploadPath + FileName + "_M.jpg", Convert.ToInt32(size[1]), 0, "M");
//ThumbnailHelper.MakeThumbnail(uploadPath + FileName + fileExt, uploadPath + FileName + "_L.jpg", Convert.ToInt32(size[2]), 0, "L");
context.Response.Write(FileName + fileExt);
//End
}
}
else
{
context.Response.Write("0");
}
}
catch (Exception e)
{
LoggerHelper.Error("上传失败:", e);
context.Response.Write("0");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
这篇博客记录了如何使用jQuery.uploadify.js这个JS插件进行文件上传操作,包括前端处理示例和后台程序的一般处理流程。
1234

被折叠的 条评论
为什么被折叠?



