jQueryを使用してファイルをアップロードすると、FormDataオブジェクトが提供され、ファイル名はGET要求なし

Question

新しいページにファイルをアップロードするためにjQueryスクリプトを使用しています。それは何とか動作しますが、問題はフォームデータをobject FormDataとして送信することです。

$('#submit').click(function() { 
    var formData = new FormData($(this).form); 
    $.ajax({ 
     url: '/test/file_capture', 
     //Ajax events 
     beforeSend: function (e) { 
     alert('Are you sure you want to upload document.'); 
     }, 
     success: function (e) { 
     alert('Upload completed'); 
     }, 
     error: function (e) { 
     alert('error ' + e.message); 
     }, 
     // Form data 
     data: formData, 
     //Options to tell jQuery not to process data or worry about content-type. 
     cache: false, 
     contentType: false, 
     processData: false 
    }); 
    return false; 
}); 

HTMLの一部として次のとおりです：

<form enctype="multipart/form-data"> 
    <input type="file" id="image" name="image" accept="Image/*" /> 
    <input type="submit" id="submit" name="" value="Upload" /> 
</form> 

しかし、生成されたリンクのようである：

ます。http：// localhostを：4965 /ここで

コードですtest/file_capture？[オブジェクト％20FormData] & _ = 1386501633340

画像がありません名前またはそれに付随する他のもの。私は何が欠けていますか？エラーはなく、要求が行われ、アップロード完了アラートが表示されますが、

Answer 1

あなただけのファイルを提出しなければならない - ではない完全な形

var fileInput = $('#image'); 
var file = fileInput.files[0]; 
var formData = new FormData(); 
formData.append('file', file); 

EDIT

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 

<form enctype="multipart/form-data"> 
    <input type="file" id="image" name="image" accept="Image/*" /> 
    <input type="submit" id="submit" name="" value="Upload" /> 
</form> 

<script> 
$('#submit').click(function (event) { 
    event.preventDefault() 
    var file = $('#image').get(0).files[0]; 
    var formData = new FormData(); 
    formData.append('file', file); 
    $.ajax({ 
     url: '/test/file_capture', 
     //Ajax events 
     beforeSend: function (e) { 
     alert('Are you sure you want to upload document.'); 
     }, 
     success: function (e) { 
     alert('Upload completed'); 
     }, 
     error: function (e) { 
     alert('error ' + e.message); 
     }, 
     // Form data 
     data: formData, 
     type: 'POST', 
     //Options to tell jQuery not to process data or worry about content-type. 
     cache: false, 
     contentType: false, 
     processData: false 
    }); 
    return false; 
}); 
</script> 

Answer 2

あなたは明示的にファイルを取得する必要があります。その後、

var image = $('#image')[0].files[0]; 

そしてFORMDATAにファイルを追加するには：

formData.append(image); 

ここで私はそれを行う方法の例です：

var image = $('#image')[0].files[0]; 

    if(window.FormData) { 
     formdata = new FormData(); 
     formdata.append('image', image); 
     formdata.append('action', 'save-image'); 

     $.ajax({ 
      url: 'controller/handler', 
      type: 'POST', 
      data: formdata, 
      processData: false, 
      contentType: false, 
      success: function(res) { 
       // Handle it. 
      } 
     }); 
    } 
} 

Answer 3

ファイルがGET方法でアップロードすることはできません。 POSTを使用する必要があります。 （Firefoxは以前のXHTMLでそれを許すかもしれませんが）また

$.ajax({ 
    method: 'POST', 
    url: '/test/file_capture', 
    // ... 

、you need HTML 5 to be able to upload files。