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

Question

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

<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>

所以现在我想要的是，而不是分别发送以上 2 个文本字段和一个文件，我希望它们嵌入到一个文件中，然后作为一个整体发送。 例子

请注意，我发送的服务器是第三方的，除了文件之外，文件格式也是专有的，但它仍然是 ASCII 纯文本/文本。我意识到它只能通过 AJAX 和 fileReader API 实现，所以这是我尝试过的

 var file;
 $('#myFile').change(function(e){
    file = this.files[0];
    var fr = new FileReader();
    fr.onload = function(event){
        fileData = fr.result;
    };
    fr.readAsDataURL(file);

  $('#myForm').submit(function(e){
    e.preventDefault();//prevent submit
    var myFile= [$('#username').val(),$('#email').val(),fileData];
    $.ajax({
      url : "some url",
      type: "POST",
      contentType:false,
      processData:false,
      data: myFile;
      success:function(data){ }
    });
 });

问题是提交表单时没有发送文件。任何帮助将不胜感激，谢谢。

Answer 1

在表单提交中，您可以按照下面提到的方式使用 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){ }
    });
 });

Answer 2

似乎您在 AJAX 负载中传递了错误的变量 - 您不应该发送fileData而不是file吗？

Answer 3

您可以上传数据和文件：

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>

查询

$("form#data").submit(function(){

var formData = new FormData($(this)[0]);

$.ajax({
    url: 'your_url',
    type: 'POST',
    data: formData,
    async: false,
    success: function (data) {
        alert(data)
    },
    cache: false,
    contentType: false,
    processData: false
});

return false;
});

Answer 4

有2个部分

1. 使用 FileReader API 将文件转换为字符串格式或在客户端对其进行序列化
2. 将您的表单值与此字符串组合并将它们作为文件发送。

第一部分

我不知道您是否注意到，但是当您使用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

第二部分

现在要真正凭空创建文件，您可以使用File或Blob，但我建议使用 Blob，因为它具有更好的支持。要包含您需要 FormData 的文件，只需将您的 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，你的 $_FILES 应该是这样的

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

)