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> 

を持って.Say 2つ以上のテキストフィールドとファイルを別々に送信するのではなく、ファイルに埋め込まれて全体として送信されるようにします。私が送ります、サーバーが第三者であり、唯一のファイルもフォーマットファイルexceptsで独自のものですが、それでもそれはまだASCIIの無地/ text.Iが、それはそうここにAJAXとFileReaderのAPIによってのみ可能だであることを認識することを example

注意私は

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){ } 
    }); 
}); 

問題を試したことは、フォームの送信時に何のファイルが.ANYヘルプが大幅に、おかげでいただければ幸い送信されませんされることをです。

Answer 1

があり、文字列の形式に2部

1. 変換ファイルがあるか、この文字列を使用してフォームの値を結合し、ファイルとしてそれらを送る
2. FileReaderのAPIを使用してクライアント側でそれをシリアル化。

あなたが気づいたりしていない場合、私は知らないが、使用時にreadAsDataURL()あなたは、元のファイルのバイトストリームを得ることはありませんが、そのbase64でエンコードされたバージョンはそう保つパート1

あなたはあなたがどんな操作をネブラスカかもしれないことに応じて、ので、いくつかの形式があると述べてきたように、あなたが

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); 
}); 

にコーディング心の変化、それはだから今、あなたは今、あなたのファイルのバイトストリームを含む文字列を持っていますあなたが基本的な文字列関数で十分であるようにそれがプレーンテキスト形式であることを述べているので、それをフォーマットと整列させるためにedを使います。次の部分については、私は本当にあなたがFileやBlobのいずれかを使用することができますが、私は、その優れたにブロブを使用することをお勧めし薄い空気のうち、ファイルを作成するために、単純なコロンベースのCSV形式に今key1:value1,key2:value2

第二部

を想定しますsupport.Toは、あなたがいるFormDataは、単にLinux上でPHPを使用している場合は、あなたの$ _FILESはこの

0のようになりますそれにあなたのブロブを追加し、

$('#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 
    ) 

) 

Answer 2

あなたのAJAXペイロードに間違った変数を送信しているようですが、の代わりにfileを送信してはいけませんか？フォームで

Answer 3

あなたはデータやファイルをアップロードすることができます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 4

と、送信ファイルについて以下に述べたように、あなたが行うことができます提出：

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; 
});