Question

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

<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个文本字段和文件，而是希望它们嵌入到文件中，然后作为一个整体发送。 example

请注意，我发送的服务器是第三方，只有文件格式是专有的，但文件格式是专有的，但它仍然是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请求的发送文件

md-tabs

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>

<强> Jquery的

$("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

共有两部分

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

第二部分

现在要真正创建一个文件，你可以使用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
    )

)

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

4 个答案: