如何在服务器端页面方法中获取由Ajax发送的发布文件 [英] how to get the posted file sent by Ajax in the server-side Page method

问题描述

我一整天都在工作。我不想使用任何奇特的插件。我的问题基本上是这样的：在asp.net c＃中，用户可以创建一个类的实例（让我们说学生），每个实例都有一个文件（图像）。我正在使用AJAX，并且代码工作正常。当用户按下创建按钮时，我也想将发布的文件发送到Page方法，这可以保存文件，同时将记录添加到数据库。但是，我无法获得张贴的文件作为FileInfo在Page方法，但作为字符串。有没有办法使这项工作？

pre $ function addBadge（）{
var badgeName = $（'＃txtBadgeName ）.VAL（）;
var badgeDesc = $（'＃txtBadgeDesc'）。val（）;
var badgeImage = $（'＃file_BadgeImage'）。get（）。files [0];
$ .ajax（{
type：POST，
url：/Instructor/ManageBadges.aspx/CreateBadge，
data：{badgeName：'+ badgeName +'，\
badgeImage：'+ badgeImage +'，\
badgeDescription：'+ badgeDesc +'}，
contentType：application / json; charset = utf-8，
dataType：json，
success：function（data）{
.....
}
}
}）;



[WebMethod]
public static string CreateBadge（string badgeImage，string badgeName，string badgeDescription）
{
//这里如何使用badgeImage？
//如何将它转换为FileInfo并保存？

Guid badgeId = Guid.NewGuid（）;
BadgeInfo newbadge = new BadgeInfo（）;
newbadge.BadgeId = badgeId;
newbadge.BadgeName = badgeName;
newbadge.BadgeDescription = badgeDescription;

解决方案

谁需要一个Ajax的asp.net解决方案（提交一个表单与文件），而不使用一个奇特的文件上传插件：

我强烈指的是最近的解决方案：

指定的解决方案使用一个处理文件上载的控制器，并从ajax调用控制器的fileupload函数。假设您有一个用于将表单输入保存到数据库的ajax方法。在这之后，ajax成功完成，在成功事件中，你需要编写另一块ajax代码来执行控制器类中定义的文件上传，如下所示：

  [HttpPost] 
 public KeyValuePair< bool，string> UploadFile（）
 {
尝试
 {
 if（HttpContext.Current.Request.Files.AllKeys.Any（））
 {
 // Get从Files集合上传的图像
 var httpPostedFile = HttpContext.Current.Request.Files [UploadedImage]; 
 $ b $ if（httpPostedFile！= null）
 {
 //验证上传的图片（可选）
 
 //获取完整的文件路径
 var fileSavePath = Path.Combine（HttpContext.Current.Server.MapPath（〜/ Images / UploadedFiles），httpPostedFile.FileName）; 
 
 //将上传的文件保存到UploadedFiles文件夹
 httpPostedFile.SaveAs（fileSavePath）; 
 
返回新的KeyValuePair< bool，string>（true，File uploaded successfully。）; 
} 
 
 return new KeyValuePair< bool，string>（true，Could not get the uploaded file。）; 
} 
 
返回新的KeyValuePair< bool，string>（true，No file found to upload。）; 
} 
 catch（Exception ex）
 {
 return new KeyValuePair< bool，string>（false，上传文件时发生错误，错误信息：+ ex。信息）; 
 
 
 $ / code $ / pre 
 $ b $ p请参考这篇文章的细节。 p> 
I have been working on this whole day. I do not want to use any fancy plugin. My problem is basically this: In asp.net c#, the user can create an instance of an class (let's say student) and each instance has a file (image). I am using AJAX, and the code works fine. When user presses create button, I want to also send the posted file to the Page method, which can can save the file, while adding the record to the db. However, I am not able to get the posted file as FileInfo in Page method but as string. Is there a way to make this work?
function addBadge() {
            var badgeName = $('#txtBadgeName').val();
            var badgeDesc = $('#txtBadgeDesc').val();
            var badgeImage = $('#file_BadgeImage').get().files[0];
            $.ajax({
                type: "POST",
                url: "/Instructor/ManageBadges.aspx/CreateBadge",
                data: "{badgeName:'" + badgeName + "', \
                        badgeImage:'" + badgeImage + "',\
                        badgeDescription:'" + badgeDesc + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    .....
                    }
                }
            });

        }


[WebMethod]
    public static string CreateBadge(string badgeImage, string badgeName, string badgeDescription)
    {
        //HERE HOW CAN USE badgeImage ??
        //HOW CAN I CONVERT IT TO FileInfo and save ?

        Guid badgeId = Guid.NewGuid();
        BadgeInfo newbadge = new BadgeInfo();
        newbadge.BadgeId = badgeId;
        newbadge.BadgeName = badgeName;
        newbadge.BadgeDescription = badgeDescription;

    }

解决方案
For those who need an ajax asp.net solution (submitting a form with a file) without using a fancy file upload plugin:

I strongly refer to a recent solution here: File Upload using jQuery AJAX in ASP.NET Web API

The indicated solution uses a controller which handles the fileupload, and the fileupload function of controller is invoked from the ajax. Let's say you have one ajax method for saving the form input to the database. After this ajax is done with success, in the success event, you need to write another piece of ajax code to perform the file upload which is defined in the controller class, as seen below:
 [HttpPost]
        public KeyValuePair<bool, string> UploadFile()
        {
            try
            {
                if (HttpContext.Current.Request.Files.AllKeys.Any())
                {
                    // Get the uploaded image from the Files collection
                    var httpPostedFile = HttpContext.Current.Request.Files["UploadedImage"];

                    if (httpPostedFile != null)
                    {
                        // Validate the uploaded image(optional)

                        // Get the complete file path
                        var fileSavePath = Path.Combine(HttpContext.Current.Server.MapPath("~/Images/UploadedFiles"), httpPostedFile.FileName);

                        // Save the uploaded file to "UploadedFiles" folder
                        httpPostedFile.SaveAs(fileSavePath);

                        return new KeyValuePair<bool, string>(true, "File uploaded successfully.");
                    }

                    return new KeyValuePair<bool, string>(true, "Could not get the uploaded file.");
                }

                return new KeyValuePair<bool, string>(true, "No file found to upload.");
            }
            catch (Exception ex)
            {
                return new KeyValuePair<bool, string>(false, "An error occurred while uploading the file. Error Message: " + ex.Message);
            }
        }
Please refer to the post for the details.

                        
这篇关于如何在服务器端页面方法中获取由Ajax发送的发布文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！