如何使用Jquery / Ajax将带有文件的webform发布到webmethod？
这有可能吗？ 我有一个带有某些文本框等的webform和一个文件上传元素。 我正在尝试使用.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); } }); }
HTML：
代码背后：
[WebMethod] public static string RegisterSupplier(string file, string biddername) { // break point not hit return "a"; }
我一直试图找到解决方案好几个小时了。 似乎没有人能够帮助我解决这个问题。 这甚至可以使用这个approch。 如果不是我该怎么办？ 有人建议我应该尝试提交整个表单而不是传递单个值。
通过使用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); } }); }
首先转到App_Start >> RouteConfig.cs >> settings.AutoRedirectMode = RedirectMode.Off; 然后只需用我的代码替换你的function它肯定会对你有用，祝你好运..
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); } });