带有文件上传的Wordpress表单通过Ajax提交

Question

我正在尝试创建表单并使用Ajax提交。 因此，该页面不会重新加载。 我对ajax的经验不足，因此我正在尝试查找尽可能多的信息。

现在在我的代码中，我可以不重新加载就发送表单。 但是我有一个用于上传文件的字段。 我知道这样做有点不同，我也找到了一些例子，但到目前为止还没有运气。 例如，在Wordpress中上载Ajax文件-无法传递FormData

现在我有这样的My Ajax代码：

阿贾克斯

(function($) {

jQuery(document).ready(function() {

    // when user submits the form
    jQuery(document).on('submit', '.form-assignment', function(event) {

        var error_elm = jQuery('.ajax-error');
        var response_elm = jQuery('.ajax-response')
       // var widgetId = grecaptcha.reset(container);
        error_elm.html('');
        response_elm.html('');

        // prevent form submission
        event.preventDefault();

        var form_elm = jQuery(this);

        var url = form_elm.data('url');
        var action = form_elm.data('action');
        var form_data = new FormData();

        var data = {
            action: action,
            form_data : form_data
        };

        // add loading message
        response_elm.html('Loading...');

        jQuery.ajax({
            type : 'POST',
            url : url,
            data : data,
            processData: false,
            contentType: false,
            enctype: 'multipart/form-data',
            dataType : 'json',
            async : true
        }).success(function(response) {

            error_elm.html('');
            response_elm.html('');

            if(response.status !== 'success') {
                // something went wrong
                if(response.message) {
                    error_elm.html(response.message);
                    return;
                }

                // don't know ?
            }

            // success!!

            // log data
            console.log(response);

            // display data
            response_elm.html(response.message);
            $("#form-assignment").trigger("reset");
            grecaptcha.reset();
        }).error(function(response) {
            error_elm.html('');
            response_elm.html('');

            error_elm.html(response.statusText);
        });
    });

});



})( jQuery );

我的表格：

 <div class="ajax-error" style="color: red;"></div>
    <form class="form-assignment" name="form_assignment" id="form-assignment"
          method="post" enctype="multipart/form-data"
          data-url="<?php echo esc_url( admin_url( 'admin-ajax.php' ) ) ?>" data-action="form_submit1">
          <label>name:</label>
          <input type="text" name="customer-field-text"pattern="[a-zA-Z0-9 ]+" placeholder="<?php echo $field->label ?>" size="40"/>
          <label>file upload</label>
           <input type="file"  name="customer-field-upload" id="customer-field-upload"
                           multiple="false"/>
    </form>

现在这就是我走了多远。 这不是我的完整表格，我已经添加了现时和其他要求的顺序设置。 当我检查输入文件时它一直显示错误消息，该字段为空。

我的表单处理程序

function handle_form_submission (){
global $wpdb;
$response = array(
    'status' => 'error',
    'message' => '',
);


parse_str($_POST['form_data'], $form_data);

//global $error;
$error = new WP_Error();

    if (empty($_POST['customer-field-name'])  ) {
    $error->add('empty','Name is required.');
}

    if (empty($_POST['customer-field-upload']) && empty($_FILES["customer-field-upload"]["name"])) {
    $error->add('empty','select an file.');
}

if ( !empty( $error->get_error_codes() ) ) {
    $error_messages = $error->get_error_messages();

    $error = '';
    foreach($error_messages as $error_message) {
        $error .= '<p>'.$error_message.'</p>';
    }

    $response['message'] = $error;

    wp_send_json( $response );
    wp_die();
}
$name                 = sanitize_text_field( $form_data["customer-field-name"] );
$upload                 = sanitize_text_field( $form_data["customer-field-upload"] );


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

 media_handle_upload( 'customer_field_upload', $form_data['post_id'] );

}

    add_action( 'wp_ajax_form_submit1', 'handle_form_submission' );

    // ajax hook for non-logged-in users: wp_ajax_nopriv_{action}
    add_action( 'wp_ajax_nopriv_form_submit1', 'handle_form_submission' );

所以我的问题是我该怎么做或添加我的ajax或表单处理程序以在Ajax工作的情况下获取文件上传提交。 任何熟悉的建议，建议或一些现有示例将不胜感激。 我正在用WordPress和Ajax进行练习，这是我取得的成就。

我尝试使用FormData，但到目前为止仍然没有运气。

Answer 1

以下是一些使您提供的表格起作用的提示：

形式：

<div class="ajax-error" style="color: red;"></div>
<form class="form-assignment" name="form_assignment" id="form-assignment" method="post" enctype="multipart/form-data"
      data-url="<?php echo esc_url(admin_url('admin-ajax.php')) ?>" data-action="form_submit1">
    <label>name:</label>
    <input type="text" name="customer-field-text" pattern="[a-zA-Z0-9 ]+" size="40"/>
    <label>file upload</label>
    <input type="file" name="customer-field-upload" id="customer-field-upload" multiple="false"/>
    <input type="submit" value="Submit" name="submit">
</form>

我从您的text输入中删除了placeholder="<?php echo $field->label ?>" ，因为它来自您未提供的自定义代码。

Ajax.js ：

jQuery(document).ready(function ($) {
    // when user submits the form
    jQuery(document).on('submit', '.form-assignment', function (event) {

        var error_elm = jQuery('.ajax-error');
        var response_elm = jQuery('.ajax-response');
        error_elm.html('');
        response_elm.html('');

        event.preventDefault();

        var form_elm = jQuery(this);

        var url = form_elm.data('url');
        var action = form_elm.data('action');
        var file = form_elm[0][1].files[0];
        var customer_field_text = form_elm[0][0].value;
        var form_data = new FormData();
        form_data.append('action', action);
        form_data.append('customer-field-upload', file);
        form_data.append('customer-field-name', customer_field_text);

        response_elm.html('Loading...');

        jQuery.ajax({
            type: 'POST',
            url: url,
            data: form_data,
            processData: false,
            contentType: false,
            cache: false
        }).success(function (response) {

            error_elm.html('');
            response_elm.html('');

            if (response.status !== 'success') {
                // something went wrong
                if (response.message) {
                    error_elm.html(response.message);
                    return;
                }

                // don't know ?
            }

            response_elm.html(response.message);
            $("#form-assignment").trigger("reset");

        }).error(function (response) {
            error_elm.html('');
            response_elm.html('');

            error_elm.html(response.statusText);
        });
    });

});

注意：您正在使用var form_elm = jQuery(this); ，它返回具有所有Form内容的jquery对象。 这就是为什么我用它来访问输入信息。 相反，您可以使用其名称，类，ID，占位符等访问表单输入。

发生了什么变化 ：

移除(function($) {}包装器，而改用jQuery(document).ready(function ($) {}); ;。这只是为了说明。无需包装jquery即可访问$ 。

我们从下面的行输入中获取文件和名称：

 var file = form_elm[0][1].files[0]; var customer_field_text = form_elm[0][0].value;

我们将为WordPress添加action ，并将其值输入到FormData ：
```
 form_data.append('action', action); form_data.append('customer-field-upload', file); form_data.append('customer-field-name', customer_field_text); 
```
在这里，您可以更改要发送的数组的名称。 例如，我们将使用关键的customer-field-upload接收数组中的文件，并可以这样使用它：
```
 $_FILES['customer-field-upload'] 
```
async : true ：我们不需要这一行。 默认情况下是这样。 enctype: 'multipart/form-data',我们也不需要。
data: form_data, ：我们仅使用一个form_data变量（ FormData对象） 发送所有内容 。

PHP文件：

我没有使用add_action('wp_ajax_nopriv_form_submit1', 'handle_form_submission'); 因为您提供的代码中没有与nonce相关的信息

您的$_POST将包含：

 Array ( [action] => form_submit1 //action, which we used to send and accept Ajax request [customer-field-name] => some input value in the name field )

您可以使用$_POST['customer-field-name']访问名称输入。

您的$_FILES将包含：

 Array ( [customer-field-upload] => Array ( [name] => input file name [type] => input file type [tmp_name] => temp file [error] => 0 [size] => some size ) )

您可以使用$_FILES['customer-field-upload']处理输入文件

编辑：附加功能以添加所有输入与几行代码：

形式：

<div class="ajax-error" style="color: red;"></div>
<form class="form-assignment" name="form_assignment" id="form-assignment" method="post" enctype="multipart/form-data"
      data-url="<?php echo esc_url(admin_url('admin-ajax.php')) ?>" data-action="form_submit1">
    <label for="customer-field-text">name:</label>
    <input type="text" name="customer-field-text" id="customer-field-text" pattern="[a-zA-Z0-9 ]+" size="40"/>
    <label>file upload</label>
    <input type="file" name="customer-field-upload" id="customer-field-upload" multiple="false"/>
    <label for="select">select:</label>
    <select name="carlist" id="select">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <label for="email">email: </label>
    <input type="text" name="email" id="email">
    <input type="submit" value="Submit" name="submit">
</form>

Ajax.js：

jQuery(document).ready(function ($) {
    // when user submits the form
    jQuery(document).on('submit', '.form-assignment', function (event) {

        var error_elm = jQuery('.ajax-error');
        var response_elm = jQuery('.ajax-response');
        error_elm.html('');
        response_elm.html('');

        event.preventDefault();

        var form_elm = jQuery(this);

        var url = form_elm.data('url');
        var action = form_elm.data('action');
        var file_input_name = jQuery('#form-assignment').find('input[type=file]').attr('id');
        var form_data = new FormData();

        form_data.append('action', action);

        jQuery.each(jQuery(':input:not([type=submit]):not([type=file])', '#form-assignment' ), function(i, fileds){
            form_data.append(jQuery(fileds).attr('name'), jQuery(fileds).val());
        });
        jQuery.each(jQuery(':input:not([type=submit]):not([type=text]):not([type=select])', '#form-assignment' )[0].files, function(i, file){
            form_data.append(file_input_name, file);
        });

        response_elm.html('Loading...');

        jQuery.ajax({
            type: 'POST',
            url: url,
            data: form_data,
            processData: false,
            contentType: false,
            cache: false
        }).success(function (response) {

            error_elm.html('');
            response_elm.html('');

            if (response.status !== 'success') {
                // something went wrong
                if (response.message) {
                    error_elm.html(response.message);
                    return;
                }

                // don't know ?
            }

            response_elm.html(response.message);
            $("#form-assignment").trigger("reset");

        }).error(function (response) {
            error_elm.html('');
            response_elm.html('');

            error_elm.html(response.statusText);
        });
    });

});

在这里，我们使用Jquery迭代器将循环中的几个值添加到FormData对象中。 这是示例，可以应用于复选框，文本区域等。

Answer 2

您缺少enctype: 'multipart/form-data'和contentType: false以防止jQuery将其设置为字符串。 如果这不起作用，请参见此示例并采用相同的方法

   jQuery.ajax({
        type : 'POST',
        enctype: 'multipart/form-data',
        url : url,
        data : data,
        async : true,
        processData: false,
        contentType: false,
    })

Answer 3

您的Jquery缺少

enctype: 'multipart/form-data'

提交表单时，这一点非常重要。 这允许在不进行任何转换的情况下发送表单数据。

jQuery.ajax({
            type : 'POST',
            url : url,
            data : data,
            enctype: 'multipart/form-data',
            dataType : 'json',
            async : true
        }).success(function(response) {

            error_elm.html('');
            response_elm.html('');

            if(response.status !== 'success') {
                // something went wrong
                if(response.message) {
                    error_elm.html(response.message);
                    return;
                }

                // don't know ?
            }

            // success!!

            // log data
            console.log(response);

            // display data
            response_elm.html(response.message);
        }).error(function(response) {
            error_elm.html('');
            response_elm.html('');

            error_elm.html(response.statusText);
        });
    });

带有文件上传的Wordpress表单通过Ajax提交

问题描述

3 个解决方案

解决方案1
3 已采纳 2018-04-15 23:45:47

解决方案2
0 2018-04-11 03:05:56

解决方案3
0 2018-04-11 04:39:59

带有文件上传的Wordpress表单通过Ajax提交

问题描述

3 个解决方案

解决方案1 3 已采纳 2018-04-15 23:45:47

解决方案2 0 2018-04-11 03:05:56

解决方案3 0 2018-04-11 04:39:59

解决方案1
3 已采纳 2018-04-15 23:45:47

解决方案2
0 2018-04-11 03:05:56

解决方案3
0 2018-04-11 04:39:59