如何使用Jquery/Ajax将带有文件的webform发布到webmethod

Question

这可能吗？我有一个带有特定文本框等的网络表单和一个文件上传元素。我正在尝试使用.ajax()方法将数据发送到webmethod。在我看来，以这种方式向web方法发送文件内容是不可能的。我甚至无法访问webmethod。

script type="text/javascript">
var btn;
var span;
$(document).ready(function (e) {
$('#btnsave').on('click', function (event) {
Submit();
event.preventDefault();
});
})
function Submit() {
$.ajax({
type: "POST",
url: "SupplierMst.aspx/RegisterSupplier",
data: "{'file' : " + btoa(document.getElementById("myFile").value) + ",'biddername':" + document.getElementById("txtsuppliername").value + "}",
async: true,
contentType: "application/json; charset=utf-8",
success: function (data, status) {
console.log("CallWM");
alert(data.d);
},
failure: function (data) {
alert(data.d);
},
error: function (data) {
alert(data.d);
}
});
}
</script>

HTML:

<input id="txtsuppliername" type="text" /><br />
<input type="file" id="myFile">

代码隐藏：

[WebMethod]
public static string RegisterSupplier(string file, string biddername)
{
// break point not hit
return "a";
}

几个小时以来，我一直在努力寻找解决方案。在这件事上似乎没有人能帮我。使用这种方法这可能吗。如果没有，我该怎么做？有人建议我应该尝试提交整个表单，而不是传递单个值。

Answer 1

这可以在没有任何库的情况下通过使用JavaScript FileReader API来完成。有了它，一旦用户选择了文件，现代浏览器就可以使用JavaScript读取文件的内容，然后你就可以像以前一样继续操作(将其编码为字符串，并将其发送到服务器)。

代码如下(使用上面的代码作为参考)：

// NEW CODE
// set up the FileReader and the variable that will hold the file's content
var reader = new FileReader();
var fileContent = "";
// when the file is passed to the FileReader, store its content in a variable
reader.onload = function(e) {
fileContent = reader.result;

// for testing purposes, show content of the file on console
console.log("The file content is: " + fileContent);
}
// Read the content of the file each time that the user selects one
document.getElementById("myFile").addEventListener("change", function(e) {
var selectedFile = document.getElementById('myFile').files[0];
reader.readAsText(selectedFile);
})
// END NEW CODE
var btn;
var span;
$(document).ready(function (e) {
$('#btnsave').on('click', function (event) {
Submit();
event.preventDefault();
});
})
function Submit() {
$.ajax({
type: "POST",
url: "SupplierMst.aspx/RegisterSupplier",
// changed this line too!
data: {
'file': btoa(fileContent), 
'biddername': document.getElementById("txtsuppliername").value 
},
async: true,
contentType: "application/json; charset=utf-8",
success: function (data, status) {
console.log("CallWM");
alert(data.d);
},
failure: function (data) {
alert(data.d);
},
error: function (data) {
alert(data.d);
}
});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="txtsuppliername" type="text" /><br />
<input type="file" id="myFile">

您可以运行上面的代码，选择一个文件(使用纯文本文件进行测试，使其可读)，然后检查控制台以查看其内容。然后剩下的代码将是相同的(我做了一个轻微的更改来修复AJAX调用中的参数)。

请注意，像这样发送文件是有限制的：如果使用GET方法，则参数大小限制会更短，而使用POST则取决于服务器设置。。。但我想，即使是一个文件，你也有这些限制。

Answer 2

首先转到App_Start>>RouteConfig.cs>>设置。AutoRedirectMode=RedirectMode.Off；然后用我的代码替换你的函数，它肯定会为你工作，祝你好运

function Submit() {
$.ajax({
type: "POST",
url: "UploadImage.aspx/RegisterSupplier",
data: "{'file' : " + JSON.stringify(document.getElementById("myFile").value) + ",'biddername':" + JSON.stringify(document.getElementById("txtsuppliername").value) + "}",
async: true,
contentType: "application/json; charset=utf-8",
success: function (data, status) {
console.log("CallWM");
alert(data.d);
},
failure: function (data) {
alert(data.d);
},
error: function (data) {
alert(data.d);
}
});