注意：服务器端不准用 \\ 必须用 /，如果用\\个会出现很多不必要的麻烦，例如用\\在给用jquery给div设置背景图片时就会出错，大家甚用。
一、简介
SWFUPload组件利用Flash自身文件提交技术而无需刷新页面，而且能够获取文件上传的进度，可以提交多个文件，而且还能控制上传文件的大小、类型等信息。
二、下载SWFUPload2.2.0.1，并配置到项目中
swfupload.js：swfupload的JS脚本，封装了swfupload.swf的各种接口供js调用，简化操作；
swfupload.swf：swfupload的核心所在，上传多个文件提供上传速度，限制文件容量尺寸；
plugins目录：swfupload的各种插件，其中swfupload.cookies.js用于解决ie中flash请求服务器时，请求头中不带cookie的bug。swfupload.queue.js插件提供更强大的上传队列功能，比如说取消队列等等。 swfupload.speed.js插件提供上传速度，上传剩余时间，以上传事件等信息。 swfupload.swfobject.js插件集成了swfobject库，用于将swfupload组件嵌入到dom中，而且新增了一个swfupload组件正在载入的事件。
三、开始修改项目
1、创建Upload文件夹、Pages文件夹、Handlers文件夹、JS文件夹、Tools文件夹
Upload文件夹-------------用来存放上传成功后的文件；
Pages文件夹--------------用来存放Web页面；
Handlers文件夹----------用来存放一般处理程序；
JS文件夹-------------------用来存放JS文件；
Tools文件夹--------------用来存放工具类；
2、在Pages文件夹中新建UploadFile.htm
Html代码
<div id="swfu-placeholder"><!--swfupload文件选择按钮占位符，执行下面的js后，这里将被替换成swfupload上传按钮--></div>
<span id="swfu-upload-status"><!--用来显示上传的信息---></span>
<div><input type="button" οnclick="swfu.startUpload();" value="上传" /></div>JS代码
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<script src="/swfu/swfupload.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
InitSwfUpload();
}
function InitSwfUpload() {
var swfuOption = {//swfupload选项
upload_url: "/Handlers/UploadFile.ashx", //接收上传的服务端url
flash_url: "/swfu/Flash/swfupload.swf", //swfupload压缩包解压后swfupload.swf的url
button_placeholder_id: "swfu-placeholder", //上传按钮占位符的id
file_types: "*.jpg;*.jpeg;*.gif;*.png;*.bmp;", //类型
file_size_limit: "20480", //用户可以选择的文件大小，有效的单位有B、KB、MB、GB，若无单位默认为KB
button_width: 215, //按钮宽度
button_height: 45, //按钮高度
button_text: '<span class="btn-txt">选择文件</span>', //按钮文字
button_text_style: '.btn-txt{color: #666666;font-size:20px;font-family:"微软雅黑"}',
button_text_top_padding: 6, //按钮的上边距
button_text_left_padding: 65, //按钮的左边距
button_image_url: "/swfu/img/swfu_bgimg.jpg", //按钮背景图片路径
debug: true, //调试模式，发布的时候要去掉
//事件
file_dialog_complete_handler: fileDialogComplete,
upload_progress_handler: uploadProgress,
upload_error_handler: uploadError, //文件上传出错
upload_success_handler: uploadSuccess, //文件上传成功
upload_complete_handler: uploadComplete//文件上传完成，在upload_error_handler或者upload_success_handler之后触发
};
var swfu = new SWFUpload(swfuOption);//初始化并将swfupload按钮替换swfupload占位符
}
//用户选择文件后自动上传需要侦听fileDialogComplete事件
function fileDialogComplete(selectedNum, queuedNum) {
if (queuedNum > 0) {//选择并添加到上传队列的文件数大于0
this.startUpload(); //开始上传
this.setButtonDisabled(true); //禁用上传按钮
}
}
var statusE = document.getElementById('swfu-upload-status'); //文件上传进度节点
//动态显示上传进度需要侦听uploadProgress事件
function uploadProgress(file, curBytes, totalBytes) {
statusE.innerHTML = ['文件名：', file.name, '总尺寸：', totalBytes, 'B已上传：', curBytes, 'B进度：', parseInt((curBytes / totalBytes) * 100), '%'].join('');
}
//上传过程中出错
function uploadError(file, errCode, msg) {
statusE.innerHTML += ['文件[', file.name, ']上传出错，出错代码：[', errCode, ']，出错原因：', msg].join('');
}
//上传成功
function uploadSuccess(file, data) {
statusE.innerHTML += ['文件[', file.name, ']上传成功，服务器返回信息：', data].join('');
}
//上传完成，无论上传过程中出错还是上传成功，都会触发该事件，并且在那两个事件后被触发
function uploadComplete(file) {
statusE.innerHTML += ['文件[', file.name, ']结束上传'].join('');
this.setButtonDisabled(false); //恢复上传按钮
}
</script>
fileDialogComplete函数用于侦听文件选择对话框关闭的事件，如果用户选择并且成功加入上传队列的文件数大于0即立即开始上传，另外禁用上传按钮，以防出错。
uploadProgress事件被触发后执行uploadProgress函数，并且给该函数传递三个参数，分别是当前上传的文件对象，当前以上传大小（单位：字节），当前上传的文件总大小（单位：字节）。
上传完成后提示文件上传是否成功需要至少侦听两个事件uploadError上传出错以及uploadSuccess上传成功，并建议侦听额外的一个uploadComplete事件，无论上传成功或者失败都会被触发
uploadError函数的三个参数分别为：文件对象，出错代码以及出错明文信息。
uploadSuccess函数的两个参数分别为文件对象，服务器返回的信息。服务器返回的信息，实在是太大了，比如上传一张图片，经过服务器处理后需要返回在服务器上存储的url，然后供显示显示，等等。
uploadComplete函数只有一个参数，即文件对象。
更多参数
Filedata，类似于表单上传控件的name属性，默认值为Filedata。这里不建议修改，因为在linux下的flash，无论怎么修改这个值，都没有效果。
post_params， post值。连同上传的文件一起提交到服务器上，这个东东也是比较有用的，比如可以验证用户是否允许上传文件等，另外可以用swfupload的addPostParam/setPostParams/removePostParam/addFileParam/removeFileParam方法修改该值，通常在上传文件额外还需要提交表单信息的时候会特别管用。
requeue_on_error, 是否将上传失败的的文件重新添加到上传队列的顶端，默认值为true。当文件上传失败或者停止上传触发uploadError事件，是否将上传失败的的文件重新添加到上传队列的顶端，当然调用cancelUpload方法触发uploadError事件，不会将文件重新添加到上传队列中，而是会丢弃。
file_types，限制上传的文件类型，这个是非常有用且重要的，默认值为*.*。另外当用户指向上传图片时可以设置为”*.jpg;*.jpeg;*.gif;*.png;*.bmp;”。另外有一点非常重要的就是，这里只是浏览器端限制了上传的文件类型，服务端依然要验证上传的文件类型，否则可能是很危险的。
file_upload_limit，允许同时上传文件的数量，默认值为0，即不限制。当文件队列中的文件数，正在上传的文件以及已经上传成功的文件数只和超过了该值后，便不在允许添加文件。
file_queue_limit，允许队列存在的文件数量，默认值为0，即不限制。当文件队列中的文件数超过该值便不再允许添加文件。
button_action，点击swfupload按钮执行的动作，默认值为SWFUpload.BUTTON_ACTION.SELECT_FILES（多文件上传）。
3、在Handlers文件夹中新建UploadFile.ashx
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
HttpPostedFile pfile = context.Request.Files["Filedata"];
//判断是不是图片
if (!MyTool.ISPicture(pfile))
{
return;
}
//准备新的文件名称,准备新的保存路径
string newfilename = MyTool.GetMD5(pfile.InputStream) + Path.GetExtension(pfile.FileName);
string newpath = context.Request.MapPath("/Upload/") + DateTime.Now.ToString("yyyyMMdd");
MyTool.CreateDirectory(newpath);
string path = Path.Combine(newpath, newfilename);
//执行保存操作
pfile.SaveAs(path);
context.Response.Write("上传成功");
}MyTools.cs参见http://blog.csdn.net/lwbitcast/article/details/14045201
四、加功能：将上传后的图片显示在img标签
修改一般处理程序将上传后的路径进行返回,然后在前端修改uploadSuccess方法data为服务器端返回的数据，从里面拿上传后图片的路径然后显示在图片标签就可以了
1、修改UploadFile.ashx
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
HttpPostedFile pfile = context.Request.Files["Filedata"];
//判断是不是图片
if (!MyTool.ISPicture(pfile))
{
return;
}
//准备新的文件名称,准备新的保存路径
string newfilename = MyTool.GetMD5(pfile.InputStream) + Path.GetExtension(pfile.FileName);
string newpath = "/Upload/" + DateTime.Now.ToString("yyyyMMdd");
MyTool.CreateDirectory(newpath);
string path = Path.Combine(context.Request.MapPath(newpath), newfilename);
//执行保存操作，并将保存后的路径进行了返回
pfile.SaveAs(path);
context.Response.Write("ok:"+newpath+"/"+newfilename);
}2、修改UploadFile.htm
添加用于显示上传后图片的img标签
<img id="pimg" />修改上传成功后的方法uploadSuccess方法,为了方便操作把JQuery插件引用进来
//上传成功
function uploadSuccess(file, data) {
//statusE.innerHTML += ['文件[', file.name, ']上传成功，服务器返回信息：', data].join('');
var result = data.split(':');
if (result[0] == 'ok') {
$('#pimg').attr('src',result[1]);
this.setButtonDisabled(false); //恢复上传按钮
}
}三、加功能：将上传成功能的图片以图景图片的方法显示在div中,且div大小与上传成功后的图片的大小保持一致。
(1)修改一般处理把图片的路径、大小进行返回
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
HttpPostedFile pfile = context.Request.Files["Filedata"];
//判断是不是图片
if (!MyTool.ISPicture(pfile))
{
return;
}
//准备新的文件名称,准备新的保存路径
string newfilename = MyTool.GetMD5(pfile.InputStream) + Path.GetExtension(pfile.FileName);
string newpath = "/Upload/" + DateTime.Now.ToString("yyyyMMdd"); //相对路径
string physicsnewpath =context.Request.MapPath(newpath); //绝对路径
MyTool.CreateDirectory(physicsnewpath); //创建绝对路径(如果存在就不会创建)
string path = Path.Combine(physicsnewpath, newfilename);
using (Image img = Image.FromStream(pfile.InputStream))
{
//执行保存操作
pfile.SaveAs(path);
context.Response.Write("ok:" + newpath + "/" + newfilename+":"+img.Width+":"+img.Height);
}
}(2)修改UploadFile.htm
divContext用来显示大图(作为背景图片进行显示)
<div id="divContext">
</div>
//上传成功
function uploadSuccess(file, data) {
//statusE.innerHTML += ['文件[', file.name, ']上传成功，服务器返回信息：', data].join('');
var d = data.split(':');
if (d[0] == 'ok') {
$('#divContext').css({'backgroundImage':'url('+d[1]+')','width':d[2]+'px','height':d[3]+'px'});
this.setButtonDisabled(false); //恢复上传按钮
}
}此时运行网站，上传图片，成功上传之后，图片会以图景图片的方式显示在divContext中，并且宽高一致。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
