本文为原创文章，欢迎转载！转载时请注明出处：http://blog.csdn.net/c_yang13
一、准备工具
1.jquery，我使用的是jquery-1.11.3.min.js
2.uploadify插件，到Uploadify官网下载即可，解压后发现有几个php文件，这是官方使用php语言做的一个例子，因为我要在asp.net下使用uplodify插件，所以把这几个php文件删掉了，删除后的目录如下：
Uploadify插件提供了很多参数和回调方法，这里Uploadify参数详解有个博主做了详细说明。
我把jquery和uplodify整个文件夹放在了网站的js目录下，如下图：
注意其中的swfobject.js不是uploadify提供的，在网上查资料的时候发现很多人都加了这个，我就下载了个，貌似不加也没什么影响，下面是从别处复制过来的对swfobject.js用途的介绍：
1.IE中没有讨厌的虚框问题了。
2.提供了完善的版本检测功能，如果版本不够则显示其他东西，比如图片或文字。
3.易于使用，只要在页面头加载一个 .js 文件，然后 HTML 写一个容器，里面放普通的文本或图片（用于无法显示 Flash 时显示），最后用脚本来替换这个元素里面的内容为 Flash。
4.使得插入Flash媒体资源尽量简捷、安全。而且它是非常符合搜索引擎优化的原则的。
5.能够避免HTML、XHTML中出现object、embed等非标准标签，从而符合更加标准。
二、创建文件
1.UploadImage.aspx：上传图片的主页面
2.UploadImage.ashx：将图片存入指定目录的一般处理程序
3.GetImage.ashx：获得已上传图片的一般处理程序
4.DeleteImage.ashx：删除所选图片的一般处理程序
5.UploadFile目录，存放上传的图片
整个工程的目录如下：
三、编写程序
先从被调用者，即后台部分开始
1.UploadImage.ashx
每上传一张图片就会调用此程序，将当前上传的图片存入UploadFile目录，我给图片重命名的时候精确到了微秒，因为这个uploadify上传文件太快了，一秒内能够上传好几张图片，如果精确到秒，很多图片就会重名，然后就被覆盖掉了，选择了10张图片上传也许实际上就上传了2张= =，不知道有无更好的重命名办法。不过在前台用checkExisting检查一下重复性也是极好的，这个可以根据需要选择。
using System;
using System.Web;
using System.IO;
public class UploadImage : IHttpHandler {
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Charset = "utf-8";
HttpPostedFile file = context.Request.Files["Filedata"];//接收上传后的文件
string uploadPath = HttpContext.Current.Server.MapPath("UploadFile" + "\\");//设置文件的保存路径
//判断上传的文件是否为空
if (file != null)
{
//判断目录是否存在，不存在则创建
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
//重新设置文件名，防止覆盖掉重名的图片
string[] f = file.FileName.Split('.');//根据.将字符串分割为字符串数组
string ext = f[f.Length - 1];//文件扩展名
string fileName = DateTime.Now.ToString("yyyyMMddhhmmssffffff") + "." + ext;//精确到微秒，秒不够！
file.SaveAs(uploadPath + fileName);
context.Response.Write("1");
}
else
{
context.Response.Write("0");
}
}
public bool IsReusable {
get {
return false;
}
}
}
2.GetImage.ashx
当主页面UploadImage.aspx载入的时候，调用此程序以展示UploadFile中的所有图片；当图片上传完毕后，调用此程序以更新图片显示。（这个就是根据需要调用了）
using System;
using System.Web;
using System.IO;
using System.Collections.Generic;
public class GetImage : IHttpHandler {
string[] imgPattern = { "*.gif", "*.jpg", "*.png" };//就是只从指定目录搜索这些后缀的文件，这个一定要和前台参数fileTypeExts的值一致。
string imgPath = "UploadFile/";//搜索路径
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
context.Response.Write(ConvertToJson(getImages(imgPath, imgPattern)));//记得把返回给前台的List<string>对象转化成Json字符串
}
public bool IsReusable
{
get
{
return false;
}
}
//获取指定路径下的所有图片
private List<string> getImages(string path, string[] searchPatterns)
{
DirectoryInfo imagesfile = new DirectoryInfo(HttpContext.Current.Server.MapPath(path));
FileInfo[] files = imagesfile.GetFiles();
List<string> tempFiles = new List<string>();//记录图片文件的名称
foreach (FileInfo file in files)
{
if (Array.IndexOf(searchPatterns, "*" + file.Extension) >= 0)
{
tempFiles.Add(file.Name);//如果是图片就存起来
}
}
return tempFiles;
}
//将object转换成json字符串
public string ConvertToJson(object obj)
{
return new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(obj);
}
}
3.DeleteImage.ashx
当点击图片下方的“删除”按钮时调用此程序，删除一个图片要做两件事：1.告诉后台把该图片从存放目录删除 2.后台将图片成功删除后，要通知前台，清除其缩略图。
所以这个程序需要接收一个参数，同时还要回传一个参数，这两个参数值是一样的，都是当前操作的图片名fileName
using System;
using System.Web;
using System.IO;
public class DeleteImage : IHttpHandler {
string imgPath = "UploadFile/";//图片存放的目录
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
//string fileName = context.Request.QueryString["fileName"];//针对Get请求，建议使用Post请求，因为Get会缓存数据，会出现问题。
string fileName = context.Request.Form["fileName"];//针对Post请求
string filePath = HttpContext.Current.Server.MapPath(imgPath + fileName);
if (File.Exists(filePath))
{
File.Delete(filePath);
context.Response.Write(ConvertToJson(fileName));//回传删除图片的名称,必须转化成Json字符串才能被前台获取到
}
}
public bool IsReusable
{
get
{
return false;
}
}
//将object转换成json字符串
public string ConvertToJson(object obj)
{
return new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(obj);
}
}
后台程序写好，主页面就可以很方便的调用了，当然在实际的开发中，我是想到哪写到哪= =
4.UploadImage.aspx
（1）引入相关文件
<link type="text/css" rel="Stylesheet" href="js/uploadify/uploadify.css" /> //用来控制上传按钮的样式、包括进度条的显示等
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> //强大的JS库，兼容各种浏览器，提供各种功能，包括创建修改HTML元素、操作CSS、实现Ajax等等
<script type="text/javascript" src="js/uploadify/jquery.uploadify.js"></script> //uploadify的核心部分
<script type="text/javascript" src="js/uploadify/swfobject.js"></script> //引入swfobject.js
（2）body部分，主要做以下工作：
1.添加一个file类型的Input控件，用来点击浏览图片
2.添加“上传”和“取消”按钮，注意加*表示点击”上传“之后一次性上传选择的所有图片，否则，即使选择了多个图片，每次点击也只上传一个图片。
3.添加一个div用来存储上传队列，展示上传进度条，我不想显示那些进度条，所以就把这个div给隐藏掉了。。。
4.添加一个div用来展示图片，注意我实现的上传后预览，而且是预览已上传的所有图片，且实现的效果是：每行显示5张图片，每个图片100px：100px,所以这个div的宽度设置成600px就够用了，然后高度就是根据内容自动增长。
<body>
<form id="form1" runat="server">
<div style=" margin:0 auto; width:700px; border:1px; border-style:solid; border-color:Silver;">
<input type="file" name="uploadify" id="uploadify" />
<p>
<a id="upload" href="javascript:$('#uploadify').uploadify('upload','*')">上传</a>|
<a href="javascript:$('#uploadify').uploadify('cancel','*')">取消上传</a>
</p>
<div id="fileQueue" style=" visibility:hidden; width:600px; height:1px; overflow:hidden;"></div>
<div id="preDiv" style=" margin:0 auto; border:1px; border-style:solid; border-color:Silver; width:600px; height:auto;">
</div>
<br />
</div>
</form>
</body>
（3）js部分，这个部分是最关键的，主要做了以下几件事：
1.点击”浏览图片“选择一张或多张图片（进度条也是在这之后生成的）；
2.点击”上传“，将选择的图片上传到指定的目录；
3.点击”取消上传“，清空上传队列（进度条会消失~）；
4.所选图片上传完毕后，在下方显示已上传的所有图片；
5.点击某个图片下面的“删除”按钮，删除该图片。
1、3设置uploadify提供的相应参数即可实现的，2、4、5还需要编写相应的后台处理程序。
<script type="text/javascript">
$(document).ready(function () {
createPreImage();
$("#uploadify").uploadify({
'auto': false, //设置选择图片之后是否立即上传，我设置的是false,就是只有在点击了”上传“按钮之后才上传图片
'swf': 'js/uploadify/uploadify.swf', //uploadify.swf 文件的相对路径。
'uploader': 'UploadImage.ashx', //后台处理程序的相对路径。
'folder': 'UploadFile', //存储图片的相对路径
'queueID': 'fileQueue', //设置上传队列容器DOM元素的ID
'buttonText': '浏览图片', //上传按钮的文字
'width': 100, //上传按钮的高和宽
'height': 30,
'removeTimeout': 0, //表示上传完成后多久删除队列中的进度条，默认为3
'removeCompleted': true, //是否自动将已完成任务从队列中删除
//'checkExisting': true, //文件上传重复性检查程序，检查即将上传的文件在服务器端是否已存在，因为我已经后台给所有上传的文件重命名，就没有设置这个属性
"fileSizeLimit": "4096KB", //上传文件大小限制，默认单位是KB
"fileTypeExts": "*.jpg;*.gif;*.png", //指定允许上传的文件类型。默认*.*
'onQueueComplete': createPreImage, //文件上传队列处理完毕后触发函数createPreImage()
'multi': true //可以选择多个文件
});
});
//下面这个函数在onQueueComplete中调用，主要做两件事：1.根据后台返回的数据动态生成缩略图 2.给每个图片对应的“删除”按钮绑定Click事件
function createPreImage() {
$.post("GetImage.ashx", function (data, status) {
$("#preDiv").empty();//先清空div
for (var i = 0; i < data.length; i++) {
var newDiv = $("<div></div>").addClass("cell");//创建子div
var newImg = $("<img/>").addClass("imgSyle");//创建img,用于展示图片
var newDel = $("<a>删除</a>").addClass("delSyle");//创建<a>，用于删除图片
var newHidden = $("<input type=\"hidden\"/>").attr("value", data[i]);//创建<input>，存储图片名称，用于向后台传递参数
newImg.attr("src", "UploadFile/" + data[i]); //设置图片的src
newDel.bind("click", function () {
delDiv = $(this).parent(); //先获取父级元素，在下面remove才有效
//$(this).parent().find("input").attr("value");//返回newDel的直接父元素的Input类型的子元素√
var fname = $(this).next().attr("value");//返回newDel元素的下一个同胞元素√
$.post("DeleteImage.ashx", { fileName: fname }, function (res, state) {
if (state == "success" && res != "") {
//$(this).parent().remove();//不起作用
//$("#" + bn).remove();//√，需要给父级元素设置id
delDiv.remove(); //√
}
});
});
newDiv.append(newImg);//将newImg、newDel、newHidden放到newDiv中，每读取一个图片就创建一个newDiv；每删除一个图片就删除其对应的newDiv
newDiv.append(newDel);
newDiv.append(newHidden);
$("#preDiv").append(newDiv);//将newDiv放到preDiv中
}
});
}
</script>
（4）Style部分，我在这部分简单设置了下图片显示的样式
<style type="text/css">
.cell
{
position:relative;
width:120px;
height:130px;
display:inline-block;
}
.imgSyle
{
display:block;
margin:0 auto;
width:100px;
height:100px;
margin-top:5px;
}
.delSyle
{
display:block;
margin:0 auto;
margin-top:5px;
width:40px;
height:15px;
line-height:15px;
outline: none;
text-decoration:none;
color:Gray;
text-align:center;
background-color:ButtonFace;
border:1px solid Silver;
}
</style>
四、处理bug
按照上述步骤创建程序之后，在firework浏览器中可以正常运行，但是在IE9中点击“浏览图片”按钮居然没有反应! 解决方法如下：
在jquery.uploadify.js文件中找到SWFUpload.prototype.getFlashHTML函数，给其返还的object标签添加一个classid属性，修改后的代码如下：
SWFUpload.prototype.getFlashHTML=function(){return['<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="',this.movieName,'" type="application/x-shockwave-flash" data="',this.settings.flash_url,'" width="',this.settings.button_width,'" height="',this.settings.button_height,'" class="swfupload">','<param name="wmode" value="',this.settings.button_window_mode,'" />','<param name="movie" value="',this.settings.flash_url,'" />','<param name="quality" value="high" />','<param name="menu" value="false" />','<param name="allowScriptAccess" value="always" />','<param name="flashvars" value="'+this.getFlashVars()+'" />',"</object>"].join("")};
OK，大功告成= =！下面附上效果图
