先了解了解uploadify，具體內容如下
uploadify是一個簡單易用的多檔案上傳方案。作為一個jquery插件，uploadify使用簡單，並具有高度的客製化。
uploadify特性：
uploadify簡單說來，是基於jquery的一款檔案上傳外掛。它的功能特色總結如下：
1）、支援單一檔案或多檔案上傳，可控制並發上傳的檔案數
2）、在伺服器端支援各種語言與之配合使用，諸如php,.net,java……
3）、透過參數可設定上傳檔案類型及大小限制
4）、透過參數可設定是否選擇檔案後自動上傳
5）、易於擴展，可控制每一步的回呼函數（onselect, oncancel…）
6）、透過介面參數和css控制外觀
7）、提供上傳進度的事件回調，即時顯示上傳進度
8）、開始之前要先下載插件安裝包到本地並引用，詳細實作請看程式碼註釋，下面開始程式碼。
1、html代碼
<div id="webapplogo_file" style="display: block; width: 800px; background-color: #fff;">
<ul>
<li style="margin-left: 213px;"><span class="black_blod14">logo图标：</span></li>
<li style="margin-left: 3px;">
<input type="text" readonly="readonly" id="text_webapplogo" name="app_logo" class="appipt1" value="<%=applogo %>" /></li>
<li style="padding-top: 1px;">
<input type="file" id="webapplogo" name="webapplogo" />
</li>
<li><span style="display: none; margin-left: 5px; padding-left: 20px; color: #ea5200;
font-size: 12px; background: url('images/icon_03.gif' ) no-repeat 0px 0px;" id="textporapplogo">
请上传logo图标！</span></li>
<li style="margin-left: 220px;"><span class="grey999" style="margin-left: 90px; float: left;">
尺寸72px*72px，png格式,建议使用 图标psd模板 制作</span>
<div id="qid_webapplogo" class="filequeue"></div>
<table id="webapplogo_tab" width="50%" border="0" cellspacing="0" cellpadding="0"
align="center" class="grey999" style="display: none; margin-left: 90px; float: left;">
<tr>
<td align="center" valign="bottom">
<img style="max-width:90%" id="img_64" src="images/icon_02.gif" border="0" / alt="基於Jquery外掛程式Uploadify實作即時顯示進度條上傳圖片_jquery" ><br />
(64*64)
</td>
<td align="center" valign="bottom">
<img style="max-width:90%" id="img_48" src="images/icon_02.gif" border="0" / alt="基於Jquery外掛程式Uploadify實作即時顯示進度條上傳圖片_jquery" ><br />
(48*48)
</td>
<td align="center" valign="bottom">
<img style="max-width:90%" id="img_32" src="images/icon_02.gif" border="0" / alt="基於Jquery外掛程式Uploadify實作即時顯示進度條上傳圖片_jquery" ><br />
(32*32)
</td>
<td align="center" valign="bottom">
<img style="max-width:90%" id="img_16" src="images/icon_02.gif" border="0" / alt="基於Jquery外掛程式Uploadify實作即時顯示進度條上傳圖片_jquery" ><br />
(16*16)
</td>
</tr>
</table>
</li>
</ul>
</div>
登入後複製
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、伺服器端處理檔上傳
/// <summary>
/// 上传文件
/// </summary>
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;//图片名称
//提供一个回调方法,用于确定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、效果如下
以上就是本文的全部內容，希望對大家的學習有所幫助。
