这可能吗?我有一个带有某些文本框等的网络表单和一个文件上传元素。我正在尝试使用 .ajax()
方法将数据发送到 webmethod。
在我看来,不可能以这种方式将文件内容发送到 web 方法。我什至无法访问网络方法。
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";
}
几个小时以来,我一直在努力寻找解决方案。似乎没有人能帮我解决这个问题。使用这种方法甚至有可能吗?如果不是我该怎么做?有人建议我应该尝试提交整个表单而不是传递单个值。
最佳答案
这可以在没有任何库的情况下完成,通过使用 JavaScript FileReader API .有了它,modern browsers可以在用户选择文件后使用 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 它将取决于服务器设置...但我想您有那些即使是一个文件也有限制。
关于javascript - 如何使用 Jquery/Ajax 将带有文件的 webform 发布到 webmethod?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30233472/