“上传图片到服务器”之SWFUpload的使用

注意：服务器端不准用 ? ? 必须用 ? /，如果用个会出现很多不必要的麻烦，例如用在给用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" onclick="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已上传：','B进度：',parseInt((curBytes / totalBytes) * 100),'%'].join('');
        }


           //上传过程中出错
         function uploadError(file,errCode,msg) {
               statusE.innerHTML += ['文件[',']上传出错，出错代码：[',']，出错原因：',msg].join('');
         }

         //上传成功
         function uploadSuccess(file,data) {
             statusE.innerHTML += ['文件[',']上传成功，服务器返回信息：',data].join('');
         }

         //上传完成，无论上传过程中出错还是上传成功，都会触发该事件，并且在那两个事件后被触发
         function uploadComplete(file) {
            statusE.innerHTML += ['文件[',']结束上传'].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 += ['文件[',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>

修改上传成功后的方法uploadSuccess方法

//上传成功
function uploadSuccess(file,data) {
    //statusE.innerHTML += ['文件[',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中，并且宽高一致。