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

Question

这可能吗？我有一个带有某些文本框等的网络表单和一个文件上传元素。我正在尝试使用 .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";
}

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

Answer 1

这可以在没有任何库的情况下完成，通过使用 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 它将取决于服务器设置...但我想您有那些即使是一个文件也有限制。