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

Question

我正在尝试构建简单的图像上传到服务器。页面是带有 webforms 的基本 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 上传图片