以文件形式提交HTML表单数据/合并表单数据+；文件并在Javascript中作为单个文件发送

我有一个带有输入字段的表单，如一些文本字段、文本区域、下拉列表和一个文件上载字段，用户在填写表单时将上载该字段。我想将表单内容（两个表单字段值+上载文件）作为一个文件发送到下面的服务器，这是我问题的一个非常简化的版本。假设我有以下标记

<form id="myForm" method="post" action="something">
  <input type="text" name="username" id="username">
  <input type="text" name="email"  id="email">
  <input type="file" name="myFile"   id="myFile">
</form>

---

问题是，在提交表格时，不会发送任何文件。任何帮助都将不胜感激，谢谢。

似乎您在AJAX负载中传递了错误的变量-您不应该发送

文件数据而不是
文件
？
在表单提交中，您可以按照下面提到的方法发送带有AJAX请求的文件

$('#myform').submit(function(e){
    e.preventDefault();//prevent submit

    var form_data = new FormData();                  
    form_data.append('file', $('#myfile').prop('files')[0]);
    form_data.append('username', $("#username").val());
    form_data.append('phone', $("#phone").val());

    $.ajax({
      url : "some url",
      type: "POST",
      contentType:false,
      processData:false,
      data: form_data;
      success:function(data){ }
    });
 });

您可以上载数据和文件：

HTML

<form id="data" method="post" enctype="multipart/form-data">
  <input type="text" name="username" id="username">
  <input type="text" name="email"  id="email">
  <input type="file" name="myFile"   id="myFile">
</form>

共有两部分

使用FileReader API将文件转换为字符串格式或在客户端对其进行序列化
将表单值与此字符串组合，并将其作为文件发送
第一部分

我不知道您是否注意到了，但是当您使用
readAsDataURL（）
时，您不会得到原始的文件字节流，而是它的base64编码版本，因此请记住将代码更改为

var fileData;
$('#myFile').change(function(e){
    file = this.files[0];
    var fr = new FileReader();
    fr.onload = function(event) {
        encfileData = fr.result;
        startInx = encfileData.indexOf('base64');
        startInx += 7;
        tmp = encfileData.substr(startInx);
        //removes the file MIME header part ie. "data:text/plain;base64," before decoding
        //regex may be preferable
        fileData = atob(tmp); //DECODE
    };
    fr.readAsDataURL(file);
});

现在你有了一个包含文件字节流的字符串，正如你所说的，有一些格式，因此根据你所做的任何操作，你可能需要使它与格式对齐，因为您已经提到了它是纯文本格式，所以基本的字符串函数在这里就足够了。对于下一部分，我假设基于简单冒号的CSV格式
key1:value1，key2:value2

第二部分

现在要真正创建一个无中生有的文件，你可以使用或，但我建议使用Blob，因为它的支持更好

$('#myForm').submit(function(e){
    e.preventDefault();
    var txtData = "\n username:"+$("#username").val()+","+"email:"+$("#email").val();
    // NOTE: windows uses \r\n instead of \n for newlines
    var payLoad =  fileData + txtData;  //append text field data to the file data

    var blob = new Blob([payLoad], {type : 'plain/txt'});
    var form = new FormData();
    var fileName = 'combined.txt';    //filename that will be used on server
    form.append('something', blob, fileName);

    $.ajax({
        url: "some url",
        type: "POST",
        cache: false,
        contentType: false,
        processData: false,
        data: form,
        success: function(response){alert(response);}
    });     
});

如果在linux上使用php，则$\u文件应如下所示

Array
(
    [something] => Array
    (
        [name] => combined.txt
        [type] => plain/txt
        [tmp_name] => /tmp/phpJvSJ94
        [error] => 0
        [size] => 95
    )

)

注意
FormData
应用程序目标的浏览器可能不支持对象。有关通用性的更多信息，请参阅。它不是面向公众的网站，因此我们可以让用户使用特定的web浏览器，但不幸的是，在尝试此代码后，我发现发送到服务器的常规ajax上载文件与原始文件相同，文本字段不在其中。在完成代码更正后，我咨询了开发人员。第三方应用程序上的团队。他们确实在上传的文件中找到了表单数据。对于你的宝贵帮助，这真是太棒了：）
$('#myForm').submit(function(e){
    e.preventDefault();
    var txtData = "\n username:"+$("#username").val()+","+"email:"+$("#email").val();
    // NOTE: windows uses \r\n instead of \n for newlines
    var payLoad =  fileData + txtData;  //append text field data to the file data

    var blob = new Blob([payLoad], {type : 'plain/txt'});
    var form = new FormData();
    var fileName = 'combined.txt';    //filename that will be used on server
    form.append('something', blob, fileName);

    $.ajax({
        url: "some url",
        type: "POST",
        cache: false,
        contentType: false,
        processData: false,
        data: form,
        success: function(response){alert(response);}
    });     
});

Array
(
    [something] => Array
    (
        [name] => combined.txt
        [type] => plain/txt
        [tmp_name] => /tmp/phpJvSJ94
        [error] => 0
        [size] => 95
    )

)