Загрузка FormData с прикрепленным файлом

Question

Я использую jquery для загрузки данных формы с прикреплением файла.

Сервер является jquery restify. проблема, что у меня есть, что я получаю файл (называемый cocktail_image_file_input) в виде строки: , что означает, что значение является следующей строкой:

[object FileList] 

Я должен увидеть его в REQ. но вместо этого я вижу его в req.context.cocktail_image_file_input как обычные строковые данные.

Я пытаюсь отправить данные, используя следующий код:

$('#finish_cocktail_button').click(
    function() { 
     var data = new FormData(); 
     var cocktailImageFile = $('#cocktail_image_file_input')[0].files; 
     if (cocktailImageFile.length == 1) { 
      data.append('cocktail_image_file_input',cocktailImageFile); 
     } 
     var cocktailName = $('#cocktail_name_input').val().trim(); 
     var cocktailSourceType = $('#cocktail_source_type_select').val(); 
     var cocktailSourceName = $('#cocktail_source_name_input').val(); 
     var cocktailSourceDesc = $('#cocktail_source_desc_input').val(); 
     if (cocktailName.length < 3) { 
      alert('please enter a valid cocktail name'); 
     } else { 
      var cocktailSteps = []; 
      $('#cocktail_steps_ul li').each(
       function() { 
        var step = []; 
        $('span', this).each(function(){step.push($(this).text())}); 
        fullStep = step.join(commandsSplitSign); 
        cocktailSteps.push(fullStep); 
       } 
      ); 
      if (cocktailSteps.length < 2) { 
       alert('really? less then 2 steps cocktail ?'); 
      } else { 
       data.append('cocktail_name',cocktailName); 
       data.append('cocktail_steps',JSON.stringify(cocktailSteps)); 
       data.append('cocktail_source_type',cocktailSourceType); 
       data.append('cocktail_source_name',cocktailSourceName); 
       data.append('cocktail_source_desc',cocktailSourceDesc); 
       $.ajax({ 
        url: 'http://api.myalcoholist.com:8888/cocktail/add_cocktail', 
        crossDomain: true 
        , type: 'POST', 
        enctype: 'multipart/form-data', 
        processData: false, 
         contentType: false 
        , data:data 
       }).done(function (data) { 
        alert(data); 
       }); 
      } 
     } 
    } 
); 

что мне не хватает?

Answer 1

вам не хватает [0]: data.append('cocktail_image_file_input',cocktailImageFile[0])

Это будет выбрать только file объект, в противном случае вы пытаетесь добавить в FileList объект, который не распознается FormData.