victorzadorozhnyy
@victorzadorozhnyy

Как отправить форму через AJAX с прекрепленным файлом?

К сайту на WP пытаюсь прикрутить форму на js для отправки писем с файлами. Сами письма отправляются, а вот файлы не могу загрузить через ajax. Вот такую ошибку выдает.
File is empty. Please upload something more substantial. This error could also be caused by uploads being disabled in your php.ini or by post_max_size being defined as smaller than upload_max_filesize in php.ini.

Код JS
handleSubmit(e) {
        e.preventDefault();
        var that=this;
        jQuery.post(

            MyAjax.ajaxurl,
            {
                'action': 'mail_nps',
                processData: false,
                contentType: false,
                
                'subject' : that.state.subject,
                'message' : that.state.message,
                'file' : that.state.file,
                
                'nonce' : MyAjax.nonce,
                async: false

            }
        ).error((resp)=>{
                console.log('error '+resp);
            }
        ).done((resp)=>{
            console.log('done '+resp);
            }
        );
    }
...

<form onSubmit={e=>this.handleSubmit(e)} encType="multipart/form-data">

                            <Input value={this.state.subject}
                                   onChange={(event)=>this.setState({subject: event.target.value})}
                                   type="text" placeholder="Subject:"
                                   required />

                            <Input value={this.state.message}
                                   onChange={(event)=>this.setState({message: event.target.value})}
                                   type="textarea" placeholder="Your message:"
                                   required />

                            <Input type="file"  
                                   onChange={(event)=>this.setState({file: event.target.value})} 
                                   className="upload"/>

                            <ButtonInput type="submit"  bsStyle="warning" block>Submit</ButtonInput>


На PHP стороне так
add_action( 'wp_ajax_mail_nps', 'mail_nps' );

function mail_nps(){

    $nonce = $_POST['nonce'];
    if (wp_verify_nonce($nonce, 'myajax-nonce')) {

        require_once(ABSPATH . "wp-admin" . '/includes/image.php');
        require_once(ABSPATH . "wp-admin" . '/includes/file.php');
        require_once(ABSPATH . "wp-admin" . '/includes/media.php');

        $subject=$_POST['subject'];
        $message=$_POST['message'];

        remove_all_filters( 'wp_mail_from' );
        remove_all_filters( 'wp_mail_from_name' );

        global $current_user;
        get_currentuserinfo();
        $from=$current_user->user_email;

        $to='test@gmail.com';
        $headers = 'From: Name <'.$from.'>' . "\r\n";

//Тут я так понимаю возникает проблема с передачей файла
        $uploadedfile = $_FILES[$_POST['file']];

        $upload_overrides = array( 'test_form' => false );

        $movefile = wp_handle_upload( $uploadedfile, $upload_overrides );

        $attachments='';
        
        if ( $movefile && ! isset( $movefile['error'] ) ) {
            $attachments = array($movefile['url']);
        }

        wp_mail( $to, $subject, $message, $headers, $attachments );
    }

    exit();
}


Как правильно передать файл и загрузить его?
Обновление
handleSubmit(e) {
        e.preventDefault();
        var that=this;

        var fd = new FormData();
        fd.append( 'userfile', $('#userfile')[0].files[0]);

        jQuery.post(
            MyAjax.ajaxurl,
            {
                'action': 'mail_nps',
                processData: false,
                contentType: false,
                data: fd,
                'subject' : that.state.subject,
                'message' : that.state.message,
                'nonce' : MyAjax.nonce,
                async: false
            }
        )
...
<Input type="file" name="userfile" id="userfile" className="upload"/>

Возникает ошибка
TypeError: Illegal invocation

Что делаю не так?
  • Вопрос задан
  • 1054 просмотра
Пригласить эксперта
Ответы на вопрос 3
archakov06
@archakov06
Frontend-разработчик (ReactJS)
kosolapus
@kosolapus
Если помогло - отмечайте решением
1. Загружаете файл (например, скрытым iframe'ом)
2. Получаете статус загрузки файла (если говорит, что 200 ОК и все доступно - то шлем форму)
3. Шлем форму, в которую засовываем ссылку на файл
4. На серверной стороне переносим файл на постоянное место, обрабатываем при желании
5. завершаем обработку формы
6. Profit!
Ответ написан
dmitry_pavlov
@dmitry_pavlov
World-class .NET freelance contractor (remotely)
Можно так (обратите внимание на new FormData(форма) )

$( '#my-form' )
  .submit( function( e ) {
    $.ajax( {
      url: 'http://host.com/action/',
      type: 'POST',
      data: new FormData( $("#my-form")[0] ),
      processData: false,
      contentType: false
    } );
    e.preventDefault();
  } );
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы