如何使用ajax jquery ASP.NET将文件上传到服务器端 [英] How to upload file to server side using ajax jquery ASP.NET

问题描述

我想在客户端（homepage.html）上传使用ajax jquery选择的文件，并将其上传到服务器端（process.aspx.cs）。任何人都可以提供示例代码吗？



我尝试过：



客户端代码（homepage.html）

i want to upload file selected using using ajax jquery at client side(homepage.html) and upload it to the server side (process.aspx.cs). can any one provide me the sample code?

What I have tried:

Client Side Code (homepage.html)

var file = $('#file')[0].files[0];
            $.ajax({
                type: "POST",
                url: "process.aspx/getFile",
                contentType: "application/json; charset=utf-8",
                data: "{'file': '" + Json.stringify(file) + "'}",
                dataType: "json",
                success: function (response) {
                    console.log(response.d);
                },
                failure: function (response) {
                    alert(response.d);
                }
            });

服务器端代码（process.aspx.cs）

Server Side code (process.aspx.cs)

public static void getFile(string file) {
            
        }

推荐答案

（' ＃file'） [ 0 ]。files [ 0 ];

('#file')[0].files[0];

.ajax （{
类型： POST，
url： process.aspx / getFile，
contentType： application / json; charset = utf-8，
data： {'file'：' + Json.stringify（file）+ '}，
dataType： json，
成功： function （响应）{
console .log中（response.d）;
}，
失败： function （响应）{
alert（response.d）;
}
}）;

.ajax({ type: "POST", url: "process.aspx/getFile", contentType: "application/json; charset=utf-8", data: "{'file': '" + Json.stringify(file) + "'}", dataType: "json", success: function (response) { console.log(response.d); }, failure: function (response) { alert(response.d); } });

服务器端代码（process.aspx.cs）

Server Side code (process.aspx.cs)

public static void getFile(string file) {
            
        }

代码中的一些小问题包括JSON助手的命名，请参见此处， JSON.stringify（） - JavaScript | MDN [ ^ ] - 注意 JSON 的大小写。引起我兴趣的另一件事是，为什么要对图像进行字符串化？你有意转换为base64吗？ 如何使用javascript将图像转换为base64字符串 - Stack Overflow [ ^ 。



既然您想使用JavaScript（Ajax）来实现这一点，那么有一种更简单，更简单的方法来处理这个...您可以直接提交文件而无需搞乱基础64.您需要检查您的表单当前设置为 enctype ;它必须是 multipart / form-data 。这是整个领域唯一棘手的部分。完成后，您甚至可以使用 Request.Files 集合来捕获文件。



我写了一个包含可用于此目的的示例代码的完整文章，请参阅：上传文件 - HTML5和jQuery方式！ [ ^ ]

Some minor issues in the code include the naming of the JSON helper, see here, JSON.stringify() - JavaScript | MDN[^] — notice the capitalization of JSON. Another thing that intrigues me, is, why are you stringifying the image? Did you intent to convert to base64? How to convert image into base64 string using javascript - Stack Overflow[^].

Since you wanted to do this using JavaScript (Ajax), there is a much simpler and easier way to handle this... Where you can submit files directly without having to mess up with the base 64. You need to check what enctype does your form is currently set to; it must be multipart/form-data. That is the only tricky part in this entire domain. Once that is done, you can even capture the file using, Request.Files collection.

I wrote a complete article with the sample code that you can use for this, please see: Uploading the Files – HTML5 and jQuery Way![^]

这篇关于如何使用ajax jquery ASP.NET将文件上传到服务器端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！