解析Jquery的LigerUI如何实现文件上传

下面是"解析Jquery的LigerUI如何实现文件上传"的完整攻略，其中包含两个代码示例：

1. LigerUI 文件上传组件

LigerUI 是一组基于jQuery的UI控件库，提供了很多方便开发的UI组件，包括表格、对话框、下拉框等等。其中，文件上传组件是非常实用的一个。

首先，为了使用LigerUI文件上传组件，需要引入LigerUI的前端框架和相关依赖文件，可以使用CDN引入。如下所示：

<link rel="stylesheet" type="text/css" href="http://cdn.ligerui.com/css/ligerui-all.min.css" />
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.ligerui.com/js/core/base.min.js"></script>
<script type="text/javascript" src="http://cdn.ligerui.com/js/plugins/ligerUpload/ligerUpload-1.2.min.js"></script>

然后，通过以下方式创建一个文件上传组件：

$("#upload").ligerUpload({
    url: "uploadhandler.ashx",
    fileType: "jpg|gif|jpeg|png",
    fileSize: "5MB",
    width: 400,
    onSuccess: function (response) {
        alert("文件上传成功");
    },
    onError: function () {
        alert("文件上传失败");
    }
});

上述代码中，#upload是文件上传组件的容器，url表示上传文件的后台处理程序，fileType设置允许上传的文件类型，fileSize设置允许上传的最大文件大小，width设置上传组件的宽度。onSuccess和onError分别为上传成功和上传失败的回调函数。

2. LigerUI 文件上传组件实例

下面给出一个实例，演示如何使用LigerUI文件上传组件来实现文件上传功能。具体需求是，在页面中添加一个文件上传组件，当用户上传文件后，将文件保存到服务器上，并在页面上显示上传的文件信息。

首先，需要在HTML文件中添加一个容器元素，用于显示文件上传组件：

<div id="fileupload"></div>

然后，在页面的JavaScript代码中，使用以下代码来创建文件上传组件：

$("#fileupload").ligerUpload({
    url: "http://localhost:8080/upload.php",
    onSuccess: function (response) {
        // 上传成功
        var fileInfo = JSON.parse(response);
        alert("上传成功: " + fileInfo.url);
        // 在页面中显示上传的文件信息
        var fileHtml = "<div><a href='" + fileInfo.url + "' target='_blank'>" + fileInfo.name + "</a></div>";
        $("#filelist").append(fileHtml);
    },
    onError: function () {
        // 上传失败
        alert("上传失败");
    }
});

上述代码中，url参数指定了上传文件的后台处理文件。在上传成功的回调函数中，通过将后台返回的文件信息转换为JSON对象，获取上传文件的相关信息，并在页面中显示上传的文件信息。

最后，在页面中添加一个容器元素，用于显示上传的文件列表：

<div id="filelist"></div>

至此，我们成功实现了文件上传功能，使用LigerUI文件上传组件可以让我们更加方便地实现这一功能。