2015-11-16 4 views
0

У меня есть форма, которая обрабатывается через $ .post, отправляя данные в php-скрипт. Мой клиент просто попросил меня включить возможность загрузки изображения с помощью этой (и нескольких других) форм.Представление формы Ajax с файлами

Я пробовал это на протяжении примерно часа и не видел никаких доказательств того, что вы действительно можете это сделать, используя $.post(), поэтому я хотел дотянуться и посмотреть, есть ли способ сделать это.

форма обрабатывается таким образом:

jQuery('.js-saveProduct').click(function(e) { 
    e.preventDefault(); 
    acSaveProduct(jQuery(this).serializeArray()) 
}; 

var acSaveProduct = function(form) { 
    var _data = { 
     action: 'ac_save_product', 
     form: JSON.stringify(form) 
    } 

    jQuery.post(
     ajaxscript.ajaxurl, 
     _data, 
     function(response) { 
      // Do Stuff 
     } 
    ); 
}; 

Если я console.log(form) после acSaveProduct() называется, поле загрузки не являются даже в массиве объектов, который получает вошедший.

Я даже не начал на стороне PHP этого, так как я знаю, что объект формы, который передается моей функции PHP, не содержит значений, которые я ищу.

EDIT показать новые ПОПЫТКА

Таким образом, пытаясь технику, связанную с помощью @Andreas, я все еще возникают проблемы с этим. Ниже мое обновление кода JQuery/PHP:

HTML

<input type="file" name="acImageNew" id="acImageNew"> 

JQuery

var acSaveProductAlt = function(form) { 
    var file_data = jQuery('#acImageNew').prop('files')[0]; 
    var form_data = new FormData(); 
    form_data.append('file', file_data); 

    alert(form_data); 

    jQuery.ajax({ 
     url: the_ajax_script.ajaxurl, 
     dataType: 'json', 
     cache: false, 
     contentType: false, 
     processData: false, 
     data: form_data, 
     type: 'post', 
     action: 'ac_ajax_save_product_alt', 
     success: function(response) { 
      alert(JSON.parse(response.success)); 
     } 
    }); 
}; 

PHP

function ac_ajax_save_product_alt(){ 
    if (0 < $_FILES['file']['error']) { 
     echo 'Error: ' . $_FILES['file']['error'] . '<br>'; 
    } 
    else { 
     move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']); 
    } 

    $response = json_encode(
     array(
      'success' => true, 
     ) 
    ); 

    header("Content-Type: application/json"); 
    echo $response; 
    exit; 
} 

В конце всего, я получаю предупреждение с 0 в качестве содержимого предупреждения. Что я делаю не так?

+2

Возможный дубликат [Jquery Ajax File Upload PHP] (http://stackoverflow.com/questions/23980733/jquery-ajax-file-upload-php) – Andreas

+0

Я буду читать это. Будет ли большая разница с использованием $ .ajax вместо $ .post? Я действительно пытаюсь не рефакторировать весь этот код. – idealbrandon

+0

'$ .post()' является просто ярлыком для '$ .ajax ({url: ..., method:" post ", ...})' : [источник на github] (https://github.com/jquery/jquery/blob/c9935b6d2db9e1be4bed12f7419e98cdca45763e/src/ajax.js#L827) – Andreas

ответ

1

Попробуйте JSON разобрать ответ сначала, а затем получить доступ к ключу success.

jQuery.ajax({ 
    url: the_ajax_script.ajaxurl, 
    dataType: 'json', 
    cache: false, 
    contentType: false, 
    processData: false, 
    data: form_data, 
    type: 'post', 
    action: 'ac_ajax_save_product_alt', 
    success: function(response) { 
     alert(JSON.parse(response).success); 
    } 
}); 
Смежные вопросы