带动画的轻量级图像上传

• 下载源代码 - 77.02 KB 

用户界面

引言

本教程将指导您创建一个具有特殊效果的图像上传、查看和删除的丰富应用程序。您可能已经学习过许多教程，帮助您使用 .NET 或 (AJAX 或 JQuery) 上传文件。现在我将这些元素结合起来，创建一个完整的应用程序。

使用的 jQuery 库

jquery-1.5.1.js (jQuery 框架，用于特殊效果) ajaxupload.3.5.js (用于以静默模式上传文件) 您可以从 https://jqueryjs.cn/ 下载最新文件。

这篇文章有什么令人惊喜的地方？

我向您展示一件令人惊喜的事情... 我没有使用任何文件上传控件，这个魔法是通过使用 JQuery 实现的。

Using the Code

Default.aspx (包含用户界面) 以下函数动态创建上传图像的界面，而无需文件上传控件。

$().ready(function () {
            var counter = 0;
            $(function () {
                var btnUpload = $('#addImage');
                new AjaxUpload(btnUpload, {
                    action: 'saveupload.aspx',
                    name: 'uploadfile',
                    onSubmit: function (file, ext) {
                        $("#loading").show();
                    },
                    onComplete: function (file, response) {
                        var uploadedfile = "UserData/" + file;
                        $("#uploadImageWrapper").
                        append("<div class='imageContainer offset'  
                        id='current" + counter + "'>
                        <img height='65px' width='65px' src='" + 
                        uploadedfile + "' alt='" + uploadedfile + 
                        "'/><div id='close" + counter + "' 
                        class='close'  title='" + uploadedfile + "'  
                        önclick='RemoveImage(this);'><a ></a></div></div>");
                        $('#current' + counter).fadeIn('slow', function () {
                            $("#loading").hide();
                            $("#message").show();
                            $("#message").html("Added successfully!");
                            $("#message").fadeOut(3000);
                            counter++;
                        });
                    }
                });
            });
        });

在上面的方法中，我定义了 action: 'saveupload.aspx'。这意味着每当您从文件对话框中选择任何文件时，它将自动调用 saveupload.aspx 文件的 Page_load 方法，该函数获取所有请求的文件（在我的例子中，一次只有一个），并将其保存在特定位置（在我的例子中是 \UserData\）。以下代码非常易于理解（用于在服务器上保存文件 saveupload.aspx.cs）。

 protected void Page_Load(object sender, EventArgs e)
    {
        HttpFileCollection uploadedFiles = Request.Files;
        int i = 0;
        if (uploadedFiles.Count > 0)
        {
            while (!(i == uploadedFiles.Count))
            {
                HttpPostedFile userPostedFile = uploadedFiles[i];
                if (userPostedFile.ContentLength > 0)
                {
                    string filename = userPostedFile.FileName.Substring
			(userPostedFile.FileName.LastIndexOf("\\") + 1);
                    userPostedFile.SaveAs(Path.Combine
			(Server.MapPath("UserData"), filename));
                }
                i += 1;
            }
        }
    }

成功将文件保存到服务器后，您应该能够在图像上传器的底部看到消息“添加成功！”。此消息将在 3 秒后自动关闭，并带有过渡效果。以下代码专门用于从服务器删除文件。我定义了 url: "removeupload.aspx?filename"。这意味着每当您单击 X 标记（您可以在每个上传的图像上看到它）时，它会将文件名传递给服务器以删除该文件。

function RemoveImage(_this) {
            var counter = _this.id.replace('close', '');
            $("#loading").show();
            $.ajax({
                type: "POST",
                url: "removeupload.aspx",
                data: "filename=" + _this.getAttribute('title'),
                success: function (msg) {
                    $('#current' + counter).fadeOut('slow', function () {
                        $("#loading").hide();
                        $("#message").show();
                        $("#message").html("Removed successfully!");
                        $("#message").fadeOut(3000);
                    });
                }
            });
        }

以下代码非常易于理解（用于在服务器上删除文件 removeupload.aspx.cs）。

protected void Page_Load(object sender, EventArgs e)
    {
        try
        {
            string filename = Server.MapPath(Request.Params["filename"]);
            FileInfo TheFile = new FileInfo(filename);
            if (TheFile.Exists) File.Delete(filename);
        }
        catch (Exception ex)
        {
        }
    }

您需要做的事情

• 尝试检查文件类型验证
• 异常处理

您的想法

如果您发现其中存在任何问题或错误，请留下评论或给我发送电子邮件。如果您对此有任何说明，也请告诉我，这样我就不必重做您的辛苦工作。如果您觉得这有帮助，请提供一个 “投票”。