Загрузка файлов через jQuery, объект FormData предоставляется и имя файла, запрос GET

Я использую jQuery script для загрузки файлов на новую страницу. Это как-то работает, но проблема в том, что он отправляет данные формы как 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://локальный: 4965/тест/file_capture [объект %20FormData] & _ = 1386501633340

У кого нет имени изображения или какой-либо другой вещи, прикрепленной к нему. Что мне не хватает? Несмотря на то, что ошибки нет, и запрос сделан, и отображается предупреждение о полной загрузке.

Ответ 1

вы должны только отправить файл - не полную форму

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

ИЗМЕНИТЬ

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

Ответ 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.
            }
        });
    }
}

Ответ 3

Файлы не могут быть загружены с помощью метода GET. Вам нужно использовать POST.

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

Кроме того, вам нужен HTML 5, чтобы иметь возможность загружать файлы (хотя Firefox может позволить это с более ранним XHTML).

Ответ 4

Сначала возьмите объект

First get the Object from HTML

 //HTML
 <input id = "file_name" type = "file" />

 //JS
 var formData = new FormData()
 var file_obj = document.getElementById("file_name")
 formData.append('file_name', file_obj.files[0]);
 $.ajax({
    url: url,
    type: 'POST',
    data: formData,
    success: function (data) {

    },
    cache: false,
    contentType: false,
    processData: false
})