综合案例分析-------使用uploadify插件实现文件上传功能（如何调用jQuery插件学习第十八，十九天）

1.需求分析：

（1）可以选择上传文件类型，限制上传文件大小，实现单个或多个文件同时上传功能，在上传过程中显示文件上传进度比例信息。

（2）文件成功上传后，如果是图片文件，则可以进行图片预览功能。

（3）无论是单个或多个文件成功上传后，可删除其队列中的某一个文件。

2.界面效果：

       选择单个或多个文件上传时，显示带百分比的进度条，提示文件上传进度信息。文件上传成功后，通过回调函数可以返回上传文件的URL。这个URL地址如果是图片，可以实现图片预览的功能。在文件上传成功后预览图片时，选择某个文件，单击"删除"链接，可以删除指定的某个上传后的文件。

3.插件介绍：

       在这个案例中，使用了基于jQuery库开发的上传文件插件uploadify。该插件是众多插件中较为优秀的一款，支持多文件自动上传，带上传进度条和百分比例，并支持多种函数触发事件，如函数onComplete（完成后），onError（出错时）等。该插件广泛应用于各项目中，深受开发者的喜爱。

       在本案例中，使用了uploadify插件的一些属性和函数，该插件的核心方法是uploadify()，其调用的格式如下：

$(上传文件元素).uploadify(options)

options对象包含的常用属性

参数名称	功能描述
uploader	上传控件的主体文件，一个Flash控件，默认值"uploadify.swl"。
script	相对路径的服务端文件名，它将处理上传的文件，绝对路径前缀或"/"或"http"的路径。默认值为"uploadify.php"。
folder	上传文件保存在服务器端的路径。
queueID	上传文件的队列ID号，与客户端页的ID号相同。
queueSizeLimit	设置在一次队列中的文件总数，单击"浏览"按钮后，可以同时选择多少个文件。
multi	是否允许同时上床多文件，可设定true或false。默认值为false。
auto	选定文件后是否自动上传，可设定true或false。默认值为false。
fileDesc	出现在上传对话框中，对文件类型描述，必须与fileExt结合使用才有效。
fileExt	上传文件所支持的格式，启用本项时需要同时声明fileDesc。如"*.jpg，*.bmp，*gif"。
sizeLimit	设置上传文件的最大值，单位为字节。
simUploadLimit	在多个文件上传时，设置同时上传文件数目。默认值为1。
buttonText	默认选择上传文件按钮的文字。默认值为BROWER。
buttonImg	默认选择上传文件按钮的图片地址。
onInit	该函数用于检测上传文件时的初始状态，使用方法如下： onInit:function(){$("#id").html("正在初始化...");}
onComplete	该函数用于文件上成功后触发，可传回5个参数。
onSelect	该函数用于选择文件后触发，可传回3个参数event，queueID，fileObj，各参数代表的意义与onComplete。
onError	该函数用于选择文件上传出错后触发，可传回4个参数event，queueID，fileObj，errorObj。其中前三个参数与onComplete函数一样，errorObj参数有两个属性：一个是type，表示错误类型，有三个类型，即"HTTP"，"IO"，"Security"；另一个属性是info，表示错误的信息描述。

（1）插件文件：

       Js/jquery.uploadify.v2.1.0.js

       Js/swfobject.js

       Images/全部文件

       Css/uploadify.css

（2）下载地址：

       http://www.uploadify.com/download/

4.功能实现：

       上传文件插件uploadify下载完成后，其使用方法十分简单，下面介绍其使用的步骤：

（1）在调用文件中引用两个JS文件：jquery.uploadify.v2.1.0.js用于文件的上传，swfobject.js用于选择上传文件的按钮。其实现代码如下：

<script type="text/javascript" src="Js/swfobject.js"></script>
<script type="text/javascript" src="Js/jquery.uploadify.v2.1.0.js"></script>

（2）在引用插件的页面中编写JS代码，设置uploadify插件上传文件时必须使用的属性，如保存上传文件的地址，处理文件上传的服务器端文件名等。其实现代码如下：

$(function(){
    $("#uploadify").uploadify({
        'uploader':'Images/uploadify.swf',
        'script':'Deal/UploadFile.ashx',
        'cancelImg':'Images/cancel.png',
        'folder':'Uploads/',
        'queueID':'fileQueue',
        'buttonImg':'Images/uploadify.jpg',
        'auto':true,
        'multi':true,
    })
})

       在上述JS代码中，为了不使用插件默认的选择上传文件的按钮，我们调用了一个"buttonImg"属性，并通过该属性设置自己定义的按钮地址，为确保文件的正确上传，其他属性所指定的文件路径或ID号必须准确无误。

（3）当插件的JS文件被引用并且相关的基本属性设置完成之后，在引用的页面文件中加入如下的HTML代码，用于实现上传文件的选择和上传队列进度信息的展示：

<div id="fileQueue"></div>
<input type="file" name="uploadify" id="uploadify" />

其中，<div>标记的ID号与JS代码中"queueID"属性的值相同的，该属性表示上传文件对的ID号，即ID号为"fileQueue"的<div>标记用于存放上传文件的队列，并通过下列代码使页面中ID号为"uploadify"的文件上传元素与插件中的uploadify()方法相绑定：

$("#uploadify").uploadify({...})

（4）编写处理文件上传的服务器端代码

       要实现文件的真正上传，还需要编写一个简单的服务端文件，接受传来的文件队列，逐个保存在服务器。在这个案例中，通过程序处理文件UploadFile.ashx实现上述的功能。实现代码如下：

<%@ WebHandler Language="C#" Class="UploadFile" %>
using System;
using System.IO;
using System.Web;
public class UploadFile:IHttpHandler{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        context.Response.Charset = "utf-8";
        HttpPostedFile file = content.Request.Files["Filedata"];
        //获取传回的保存文件地址
        string uploadPath = HttpContext.Current
        .Server.MapPath(@context.Request["folder"]) + "\\";
        //如果有文件
        if (file != null)
        {
            if (!Directory.Exists(uploadPath))    //目录不存在
            {
                Directory.CreateDirectory(uploadPath);    //新创建目录
            }
            file.SaveAs(uploadPath + file.FileName);
            //返回一个值，确保上传成功后，在前台的文件队列自动消失
            context.Response.Write("1");
        }
        else
        {
            context.Response.Write("0");
        }
    }
    ...
}

（5）代码分析

       经过上述四个步骤，就可以在一个HTML页面中通过引用uploadify插件中的方法，实现一个或多个文件的上传。

       在通过uploadify插件实现文件上传过程中有一个onComplete()函数，该函数在每一个文件上传成功后便触发，并且在触发时传回5个参数，分别为event，queueId，fileObj，response，data，其各自代码意义如下：

       event：表示触发事件的对象。

       queueId：上传文件中队列的标识，用于区分每一个上传文件，它由六位随机数组组成。

       fileObj：选择上传的文件对象。通过该对象，可以访问上传文件的相关属性，如name(名称)，size(大小)，creationDate(创建时间)，modificationDate(修改时间)，type(文件类型)，filePath(保存路径)。

       response：服务器端文件上传处理程序返回的值，即文件UploadFile.ashx返回值。在本案例中，文件上传成功后，返回值为1.。

       data：表示文件上传数据流。该对象有两个重要属性，一个是fileCount，表示还没有上传完的文件总量；另一个是speed表示文件的平均上传速度。

       根据对onComplete()函数中各个返回参数的描述，可以通过第三个参数fileObj中的filePath属性值，返回上传文件后的URL。如果是图片上传，将返回的图片URL设置为客户端中<img>标记的src属性值，从而实现图片上传后预览的功能。其实现的JS代码如下：

function SetFileContent(objFile) {    //根据上传对象返回预览的图片
    var sLi = "";
    sLi += "<li>";
    sLi += "<img src='" + objFile.filePath + "'width='100' height='100'>";
    sLi += "<input type='hidden' value='" + objFile.filePath + "'>";
    sLi += "<br />";
    sLi += "<a href='javascript:void(0)'>删除</a>";
    sLi += "</li>";
    return sLi;
}

其中，自定义的函数SetFileContent中的参数objFile就是onComplete()函数中的第三个参数fileObj，将上述函数SetFileContent放入onComplete()事件中，即实现了图片文件上传成功后，可以进行预览的功能，从而完成了第二项需求。其实现的代码如下：

$(function() {
    $("#uploadify").uploadify({
        ...
        'onComplete':function(event,queueID,fileObj,response,data) {
            $('ul').append(SetFileContent(fileObj));
        }
    })
})

为了在页面中展示预览的图片，需要加入一个列表<ul>标记，其页面代码如下：

<ul></ul>
<div id="fileQueue"></div>
<input type="file" name="uploadify" id="uploadify" />

图片上传成功后进行预览时，为了可以删除不太理想的图片文件，需要确定被删除表项<li>的ID号，使用jQuery中的remove()方法移除指定的表项<li>的ID号，使用jQuery中的remove()方法移除指定的表项。最后，在增加新表项内容时，重新分配表项的ID号，从而保证ID号的不重复。具体流程如下：

（1）通过each方法遍历全部的表项<li>并设置对应的ID号，代码如下：

//设置各表项ID号
$("ul li").each(function(l_i) {
    $(this).attr("id","li_" + l_i);
})

（2）通过each方法遍历全部表项中"删除"链接，设置对应的"rel"属性，用于传递删除表项的ID号，其代码如下：

//设置各链接的rel属性值
$("ul li a").each(function(a_i) {
    $(this).attr("rel",a_i);
})

（3）根据表项中"删除"链接中的"rel"属性，设置删除某个表项的单击事件，其实现的代码如下：

//设置各链的单击事件
$("ul li a").click(function() {
    //通过自身的rel值，获取表项的ID号
    var li_id = "#li_" + this.rel;
    //根据ID号，删除某个表项
    $(li_id).remove();
})

由于上述操作都在同一函数中触发，并且可以进行链写，因此将其封装到另外一个自定义的函数SetUploadFile中，其最后完整的代码如下：

function SetUploadFile() {
    //设置各项表ID号
    $("ul li").each(function(l_i){
        $(this).attr("id","li_"+l_i);
    })

    //设置各链接的rel属性值
    $("ul li a").each(function(a_i){
        $(this).attr("rel",a_i);
    }).click(function(){    //设置各项链接的单击事件
        //通过自身的rel值，获取表项的ID号
        var li_id = "#li_" + this.rel;
        //根据ID号，删除某个表项
        $(li_id).remove();
    })
}

       最后，将上述定义的函数SetUploadFile放入onComplete()函数中，就可以在预览上传图片时进行删除的操作，从而完成了第三项需求。其实现代码如下

$(function(){
    $("#uploadify").uploadify({
        ...
        'onComplete':function(event,queueID,fileObj,response,data) {
            $('ul').append(SetFileContent(fileObj));
            SetUploadFile();
        }
    })
})

       为了更好地实现页面与代码的分离，本案例中创建一个HTML文件UploadPic.html，用于用户选择上传的文件，其完整的代码如下：

<script type="text/javascript" src="Js/fileUpload.js"></script>
<script type="text/javascript" src="Css/uploadify.css"></script>
<style type="text/css">
    ...
</style>

<div class="divFrame">
    <div class="divTitle">
        上传图片
    </div>
    <div class="divContent">
        <ul></ul>
        <div id="fileQueue" style="clear:both;padding-top:5px"></div>
        <div style="padding-top:5px">
            <input type="file" name="uploadify" id="uploadify" />
        </div>
    </div>
</div>

       另外，新建一个JS文件fileUpload.js，用于实现页面中的文件上传和预览，以及删除上传的文件，其完整代码如下：

///<reference path="../Jscript/jquery-1.8.2.min.js"/>
///<reference path="../Js/swfobject.js"/>
///<reference path="../Js/jquery.uploadify.v2.1.0.js"/>
$(function(){
    $("#uploadify").uploadify({
        'uploader':'Images/uploadify.swf',
        'script':'Deal/UplaodFile.ashx',
        'cancelImg':'Images/cancel.png',
        'folder':'Uploads/',
        'queueID':'fileQueue',
        'buttonImg':'Images/uploadify.jpg',
        'auto':true,
        'multi':true,
        'fileExt':'*.jpg;'.jpeg;*.gif;*.png',
        'onComplete':function(event,queueID.fileObj,response,data){
            $('ul').append(SetFileContent(fileObj));
            setUploadFile();
        }
    })
})
function SetFileContent(objFile) {    //根据上传对象返回预览的图片
    var sLi = "";
    sLi += "<li>";
    sLi += "<img src='" + objFile.filePath + "' width='100' height='100'>";
    sLi += "<input type='hidden' value='" + objFile.filePath + "'>";
    sLi += "<br />";
    sLi += "<a href='javascript:void(0)'>删除</a>";
    sLi += "<li>";
}
function SetUploadFile() {
    //设置各表项ID号
    $("ul li").each(function(l_i){
        $(this).attr("id","li_" + l_i);
    })
    //设置各链接的rel属性值
    $("ul li a").each(function(a_i) {
        $(this).attr("id","li_" + l_i);
    }).click(function() {//设置各链接的单击事件
        //通过自身的rel值，获取表的ID号
        var li_id = "#li_" + this.rel;
        $(li_id).remove();
    })
}