jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】

要实现“jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】”，我们需要以下几个步骤：

1. 引入必要的文件

为了使用jquery ajaxfileuplod和essyui，我们需要在页面中引入以下文件：

<!-- 引入jQuery库 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- 引入easyui库 -->
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/jquery-easyui/1.8.1/themes/default/easyui.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-easyui/1.8.1/jquery.easyui.min.js"></script>
<!-- 引入ajaxfileupload插件 -->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-ajaxfileupload/1.0.0/ajaxfileupload.js"></script>

2. 创建上传按钮

在HTML中，我们需要创建一个上传按钮，以便用户点击后选择文件进行上传：

<input type="file" id="fileupload" name="fileupload">

3. 实现上传功能

接下来，我们需要通过jquery ajaxfileuplod插件来实现上传功能。完整代码如下：

$(document).on("change", "#fileupload", function () {
    var fileInput = $(this),
        url = "/upload",  //上传文件的地址
        imgSize = 1 * 1024 * 1024,  //限制文件大小1M
        loading = $.messager.progress({
            title: "上传中，请稍后...",
            msg: ""
        });
    //判断是否已经上传重复文件
    var uploadFlag = false,
        fileName = fileInput.val().split("\\").pop(),
        fileList = $("#fileList").datagrid("getData").rows;
    for (var i = 0; i < fileList.length; i++) {
        if (fileList[i].fileName == fileName) {
            $.messager.alert("警告", "文件已存在，请勿重复上传。");
            uploadFlag = true;
            return false;
        }
    }
    if (!uploadFlag) {
        //验证文件大小
        if ($.trim(fileInput.val()) == "") {
            $.messager.alert("提示", "请选择要上传的文件。");
            return false;
        } else if (fileInput[0].files[0].size > imgSize) {
            $.messager.alert("提示", "上传文件不能大于1M。");
            return false;
        } else {
            $.ajaxFileUpload({
                url: url,
                secureuri: false,
                fileElementId: fileInput.attr("id"),
                dataType: "json",
                async: false,
                success: function (data, status) {
                    //上传成功后的一些操作
                    $.messager.show({
                        title: "提示",
                        msg: "上传成功。"
                    });
                },
                error: function (data, status, e) {
                    //上传失败后的一些操作
                    $.messager.alert("错误", "上传失败，请稍后重试。");
                }
            });
        }
    }
    $.messager.progress("close");
});

上述代码的具体功能和实现方式如下：

1. 监听文件上传按钮的值改变事件；
2. 获取文件上传地址、文件大小等信息；
3. 判断是否已经上传重复文件，在easyui中使用datagrid显示已上传文件列表；
4. 对上传的文件进行大小限制；
5. 发送ajax请求，实现文件上传功能；
6. 在上传成功或失败时，显示相应的提示信息。

4. 防止重复上传文件

为了防止用户重复上传同一个文件，我们可以在easyui的datagrid中显示已经上传的文件列表，并在上传之前检查文件名是否已经存在于列表中。下面是实现方式的示例代码：

$(function () {
    //使用easyui的datagrid显示文件列表：
    $("#fileList").datagrid({
        singleSelect: true,
        columns: [[
            {field: "fileName", width: 200, title: "文件名"},
            {field: "fileSize", width: 100, title: "大小"},
            {field: "uploadTime", width: 150, title: "上传时间"}
        ]],
        fit: true,
        rownumbers: true,
        idField: "id",
        nowrap: false,
        loadMsg: "",
        pagination: false,
        pageSize: 20,
        scrollbarSize: 0,
        striped: true,
        url: "getFilesList",
        onDblClickRow: function (rowIndex, rowData) {
            //双击文件列表，可以下载相应文件的功能
            window.location.href = "download?fullName=" + rowData.fullName;
        }
    });
});

5. 加载效果

为了使用户在等待上传任务完成时不会感到无聊或无助，我们还可以使用easyui的loading效果来提示用户。可以在上传开始时显示loading，在上传结束时关闭loading。示例代码如下：

//在ajax请求开始时，开启loading
$.messager.progress({
    title: "上传中，请稍后...",
    msg: ""
});
//在ajax请求结束时，关闭loading
$.messager.progress("close");

至此，完整的“jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】”攻略已经完成。