基于ASP.NET+easyUI框架实现图片上传功能（表单）

下面我将详细讲解“基于ASP.NET+easyUI框架实现图片上传功能（表单）”的完整攻略。

一、前置条件

在开始实现图片上传功能之前，我们需要确保以下环境和条件已经满足：

1. 本地已经安装了Visual Studio 集成开发工具；
2. 项目中已经引用了easyUI框架；
3. 已经配置好了上传文件的保存路径。

二、实现步骤

（1） filebox控件的配置

首先，在ASP.NET表单中使用easyUI提供的filebox控件用于上传文件。filebox控件可以很方便的实现文件的上传功能，我们只需要在控件上添加一些属性即可：

<input id="fileBox" name="notesFile" class="easyui-filebox" data-options="prompt:'请选择文件:'" accept=".jpg,.png,.gif" style="width:80%;"/>

这段代码定义了一个easyUI的filebox控件，该控件的id为fileBox，name为notesFile，宽度为80%，并且只能选择.jpg、.png、.gif等文件格式。

（2） 服务端代码实现

接下来，我们需要编写服务端的代码，以完成文件上传的过程。下面是一个简单的文件上传函数的示例代码：

public static string UploadFile(HttpPostedFileBase file)
{
    var uploadPath = @"D:\UploadFiles\";
    if (file != null && file.ContentLength > 0)
    {
        var fileName = Path.GetFileName(file.FileName);
        var path = Path.Combine(uploadPath, DateTime.Now.ToString("yyyyMMddHHmmssfff") + fileName);
        file.SaveAs(path);
        return fileName;
    }
    return null;
}

该函数接受一个HttpPostedFileBase对象作为参数，针对该对象进行文件上传。在该函数中，我们定义了文件保存的路径为上传目录下的某个文件夹，使用Path.GetFileName()方法获取原始文件名，然后使用SaveAs()方法将文件保存到指定的路径中。

（3） 文件上传的触发

最后，我们需要在页面中添加一个按钮，当用户点击该按钮时，就会上传选中的文件。下面是一个按钮的示例代码：

<a href="#" class="easyui-linkbutton" onclick="uploadFile()">上传</a>

该按钮通过调用uploadFile()方法来触发文件的上传。下面是该方法的示例代码：

function uploadFile(){
    var formData = new FormData();
    formData.append("file", $("#fileBox")[0].files[0]);
    $.ajax({
        url: "/Upload/UploadFile",
        type: "POST",
        processData: false,
        contentType: false,
        data: formData,
        success: function (data) {
            alert("上传成功！");
        },
        error: function () {
            alert("上传失败！");
        }
    });
}

该方法定义了一个FormData对象，该对象用于在AJAX请求中传递文件数据。然后，我们使用$.ajax()方法发起一个POST请求，并将FormData对象传递到服务端。在成功的回调函数中，我们可以提示用户文件上传成功，而在错误的回调函数中，则提示用户文件上传失败。

三、示例说明

下面是两个简单的示例，说明如何实现基于ASP.NET+easyUI框架的图片上传功能。

示例一：点击“上传”按钮上传文件

<form id="uploadForm" method="post" enctype="multipart/form-data">
    <input id="fileBox" name="notesFile" class="easyui-filebox" data-options="prompt:'请选择文件:'" accept=".jpg,.png,.gif" style="width:80%;"/>
</form>
<a href="#" class="easyui-linkbutton" onclick="uploadFile()">上传</a>

<script>
function uploadFile(){
    var formData = new FormData($("#uploadForm")[0]);
    $.ajax({
        url: "/Upload/UploadFile",
        type: "POST",
        processData: false,
        contentType: false,
        data: formData,
        success: function (data) {
            alert("上传成功！");
        },
        error: function () {
            alert("上传失败！");
        }
    });
}
</script>

示例二：拖拽文件上传

<div id="uploadArea">
    <span>将文件拖拽到此处上传</span>
</div>

<script>
    $(function () {
        var uploadArea = $("#uploadArea");
        uploadArea.on("dragenter", function (e) {
            e.stopPropagation();
            e.preventDefault();
            uploadArea.css("background-color", "#f2f2f2");
        });

        uploadArea.on("dragover", function (e) {
            e.stopPropagation();
            e.preventDefault();
        });

        uploadArea.on("drop", function (e) {
            e.stopPropagation();
            e.preventDefault();
            var files = e.originalEvent.dataTransfer.files;
            var formData = new FormData();
            formData.append("file", files[0]);
            $.ajax({
                url: "/Upload/UploadFile",
                type: "POST",
                processData: false,
                contentType: false,
                data: formData,
                success: function () {
                    alert("上传成功！");
                },
                error: function () {
                    alert("上传失败！");
                }
            });
        });
    })
</script>

在这个示例中，我们通过在页面中添加一个div元素，并且绑定相关事件来实现对文件的拖拽上传。当用户将文件拖到uploadArea中时，我们可以通过originalEvent.dataTransfer.files获取到拖入的文件。然后就可以根据之前所说的方法来实现文件的上传。

希望这个攻略能帮到你，如果还有问题，可以继续问我哦~