Php Wordpress表单，带文件上传和Ajax提交_Php_Jquery_Ajax_Wordpress

Php Wordpress表单，带文件上传和Ajax提交

php jquery ajax wordpress

Php Wordpress表单，带文件上传和Ajax提交,php,jquery,ajax,wordpress,Php,Jquery,Ajax,Wordpress,我正在尝试创建表单并用ajax提交它。因此页面不会重新加载。我对ajax没有太多的经验，我正试图找到尽可能多的信息现在在我的代码中，我可以在不重新加载的情况下提交表单。但我有一个上传文件的字段。我知道这样做有点不同，我也找到了一些例子，但到目前为止没有运气。比如说现在我的Ajax代码如下所示： Ajax (function($) { jQuery(document).ready(function() { // when user submits the form jQue

我正在尝试创建表单并用ajax提交它。因此页面不会重新加载。我对ajax没有太多的经验，我正试图找到尽可能多的信息

现在在我的代码中，我可以在不重新加载的情况下提交表单。但我有一个上传文件的字段。我知道这样做有点不同，我也找到了一些例子，但到目前为止没有运气。比如说

现在我的Ajax代码如下所示：

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>

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);
        });
    });

});