使用 ajax 和 asp.net 上传图像返回 html

Question

我正在尝试构建简单的图像上传到服务器。 页面是带有网络表单的基本 asp.net 页面。

HTML 代码 - 工作正常

<div>
 <input type="file" id="myPhoto" />
 <input type="button" id="upload" value="Upload" />
</div>

在后端，我在 dog.aspx 中的代码是

[WebMethod(EnableSession = true)]
    public static string uploadDoc(HttpPostedFileBase file)
    {
        try
        {
        string _file = mkStorage.UploadImg(file);
        return _file;
        }
        catch (Exception e)
        {
            return e.Message;
        }
    }

还有我在使用 jQuery ajax 调用时遇到的问题。它仅将整个页面作为 html 返回到控制台。它甚至不会调用 WebMethod，因为我的刹车点不会激活。

Javascript 代码

$(document).ready(function () {
        $("#upload").click(function () {
            var formdata = new FormData();
            var _image = $('#myPhoto')[0].files[0];
            formdata.append('file', _image);

            $.ajax({
                type: "POST",
                url: "dog.aspx/uploadDoc",
                data: formdata,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (result) { console.log(result);},
                error: function (result) { console.log(result); }
            });
        });
    });

我还有其他 ajax 调用，它们工作正常。但是那些只将 json 传递给 WebMethod。所以我认为我的 ajax 调用参数有问题。

Answer 1

也许是这样的？

HTML：

//*
<input type="file" class="upload"  id="f_UploadImage"><br />
<img id="myUploadedImg" alt="Photo" style="width:180px;" />
//*

现在我们创建一个通用函数 sendFile()，在其中我们将文件内容添加到 FormData 的集合并进行 jQuery Ajax 调用

function sendFile(file) {
            
    var formData = new FormData();
    formData.append('file', $('#f_UploadImage')[0].files[0]);
    $.ajax({
        type: 'post',
        url: 'fileUploader.ashx',
        data: formData,
        success: function (status) {
            if (status != 'error') {
                var my_path = "MediaUploader/" + status;
                $("#myUploadedImg").attr("src", my_path);
            }
        },
        processData: false,
        contentType: false,
        error: function () {
            alert("Whoops something went wrong!");
        }
    });
}

注意： contentType 和 processData 设置为 false，这很重要。

现在我们在文件上传控件更改事件上调用此函数。 。IE。每当用户选择任何图像文件上传我们的 sendFile() 函数都会被调用。代码如下所示。

var _URL = window.URL || window.webkitURL;
$("#f_UploadImage").on('change', function () {
 
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function () {
            sendFile(file);
        };
        img.onerror = function () {
            alert("Not a valid file:" + file.type);
        };
        img.src = _URL.createObjectURL(file);
    }
});

您可能已经注意到，在上面的 jQuery ajax 方法中，我们将 URL 设置为 fileUploader.ashx，这是 Generic Handler（ashx 文件）。通过使用这个文件，我们将在服务器端上传文件。我们已经完成了客​​户端代码，让我们来看看服务器端代码。

服务器端：添加通用处理程序（ashx 文件）来处理服务器端代码，即 C# 代码以将图像文件保存在服务器上。

现在首先导入 System.IO 命名空间，如下代码所示。

C#

复制下面编写的代码，这将从客户端获取文件，并使用唯一名称重命名图像，然后将其保存到 MediaUploader 文件夹。

using System;
using System.Web;
using System.IO;
public class fileUploader : IHttpHandler {

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        try
        {
            string dirFullPath = HttpContext.Current.Server.MapPath("~/MediaUploader/");
            string[] files;
            int numFiles;
            files = System.IO.Directory.GetFiles(dirFullPath);
            numFiles = files.Length;
            numFiles = numFiles + 1;
            string str_image = "";

            foreach (string s in context.Request.Files)
            {
                HttpPostedFile file = context.Request.Files[s];
                string fileName = file.FileName;
                string fileExtension = file.ContentType;

                if (!string.IsNullOrEmpty(fileName))
                {
                    fileExtension = Path.GetExtension(fileName);
                    str_image = "MyPHOTO_" + numFiles.ToString() + fileExtension;
                    string pathToSave_100 = HttpContext.Current.Server.MapPath("~/MediaUploader/") + str_image;
                    file.SaveAs(pathToSave_100);
                }
            }
            //  database record update logic here  ()
            
            context.Response.Write(str_image);
        }
        catch (Exception ac) 
        { 
        
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

注意：这里的 MediaUploader 是我们的文件夹名称，我们上传的所有图片都会保存在其中。

输出：最后我们完成了使用 jQuery ajax 上传图片

Answer 2

使用 formData 不会向服务器发送参数。该文件必须从 http 上下文中拉取，如下所示：

[WebMethod]
public static string uploadDoc()
    {
        var context = HttpContext.Current; 
        //I generally use foreach (string file in context.request.files) to avoid null errors 
        string file = context.request.files[0];  
        var fileContent = context.Request.Files[file];

这只是一个小存根，允许您获取服务器上的文件对象。它返回一个流供您操作并加载到图像或另存为转换为二进制并保存文件。

HTH, 杰夫