jQuery File Uploader zusätzliche Daten übertragen und senden

[maria1]

Hallo an alle,

ich benutze folgendes Plugin: https://github.com/blueimp/jQuery-File-Upload

Ich würde nun gerne zum Upload Formular (habe ich bereits gemacht) Felder hinzufügen und anschließend das Formular auswerten und die hochgeladenen Bilder bzw. deren Links in der Email ausgeben.
Habe mit natürlich schon das hier angesehen aber bei mir klappt es leider nicht...

https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data

Relevanter Code:

jQuery(function () {
    'use strict';

    // Initialize the jQuery File Upload widget:

    jQuery('#fileupload').fileupload({
        url: '<?php print(admin_url('admin-ajax.php'));?>',
     
    });


    // Enable iframe cross-domain access via redirect option:
    jQuery('#fileupload').fileupload(
        'option',
        'redirect',
        window.location.href.replace(
            /\/[^\/]*$/,
            <?php
            $absoluteurl=str_replace(home_url(),'',JQHFUPLUGINDIRURL);
            print("'".$absoluteurl."cors/result.html?%s'");
            ?>
        )
    );

    if(jQuery('#fileupload')) {
        // Load existing files:
        jQuery('#fileupload').addClass('fileupload-processing');
        var formData = jQuery('#fileupload').serializeArray();
        // Load existing files:
        jQuery.ajax({
            // Uncomment the following to send cross-domain cookies:
            //xhrFields: {withCredentials: true},
            url: jQuery('#fileupload').fileupload('option', 'url'),
            data : {action: "load_ajax_function"},
            acceptFileTypes: /(\.|\/)(<?php print(get_option('jqhfu_accepted_file_types')); ?>)$/i,
            dataType: 'json',
             formData: {example: 'test'},
            context: jQuery('#fileupload')[0]
        }).always(function () {
            jQuery(this).removeClass('fileupload-processing');     
        }).done(function (result) {
            jQuery(this).fileupload('option', 'done')
                        .call(this, jQuery.Event('done'), {result: result});
        }).on('fileuploadsubmit', function (e, data) {
    data.formData = data.context.find(':input').serializeArray();
});;
    }

});

UploadHandler.php

    protected function handle_form_data($file, $index) {
    
       mail('[email protected]', 'Mein Betreff', 'Test');
    
    }

Leider kommt keine Mail an.

Habe auch schon anderes versucht aber dann wird immer eine Mail nach jedem Upload gesendet.
Ich habe in dem Formular auch noch einen Button integriert und nachdem dieser gedrückt wird soll die Mail mit den Daten versendet werden also sozusagen.

Versuche es nun schon sehr lange aber es klappt einfach nicht wie gewünscht.

Jemand Tipps?

Formular:

    <form id="fileupload" action="<?php print(admin_url().'admin-ajax.php');?>" method="POST" enctype="multipart/form-data" style="max-width:500px;" class="uploadform">
        <div id="fieldfull"><label>Ihr Name: *</label><span class="inputfield"><input type="text" name="name"/></span></div>
        <div id="fieldfull"><label>Firma:</label><span class="inputfield"><input type="text" name="firma"/></span></div>
        <div id="fieldfull"><label>Ansprechpartner:</label><span class=""><input type="text" name="ansprechpartner" required/></span></div>
        <div id="fieldfull"><label>Telefon:</label><span class="inputfield"><input type="text" name="telefon"/></span></div>
        <div id="fieldfull"><label>E-Mail:</label><span class="inputfield"><input type="text" name="email"/></span></div>
        <div id="fieldfull"><label>Angebots Nr:</label><span class="inputfield"><input type="text" name="angebotsnr"/></span></div>
        <div id="fieldfull"><label>Auflage:</label><span class="inputfield"><input type="text" name="auflage"/></span></div>
        <div id="fieldfull"><label>Teilproduktion:</label><span class="inputfield"><input type="text" name="teilproduktion"/></span></div>
        <div id="fieldfull"><label>Format offen:</label><span class="inputfield"><input type="text" name="foffen"/></span></div>
        <div id="fieldfull"><label>Format geschlossen:</label><span class="inputfield"><input type="text" name="fgeschlossen"/></span></div>
        <div id="fieldfull"><label>Papier: g/m<sup>2</sub></label><span class="inputfield"><input type="text" name="papier"/></span></div>
        <div id="fieldfull"><label>Sonstiges:</label><span class=""><textarea name="sonstiges"></textarea></span></div>
        <!-- Redirect browsers with JavaScript disabled to the origin page -->
       <input type="hidden" name="action" value="load_ajax_function" />
        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
       <div class="fileupload-buttonbar">
       <div class="fileupload-buttons">
            <!-- The fileinput-button span is used to style the file input field as button -->
            <label class="jqhfu-file-container">
              Add files...
                <input type="file" name="files[]" multiple class="jqhfu-inputfile">
            </label>
            <button type="submit" class="start jqhfu-button">Start upload</button>
            <button type="reset" class="cancel jqhfu-button">Cancel upload</button>
            <button type="button" class="delete jqhfu-button">Delete</button>
            Alle auswählen <input type="checkbox" class="toggle">
            <!-- The global file processing state -->
            <span class="fileupload-process"></span>
        </div>
        <!-- The global progress state -->
        <div class="fileupload-progress jqhfu-fade" style="display:none;max-width:500px;margin-top:2px;">
            <!-- The global progress bar -->
            <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
            <!-- The extended global progress state -->
            <div class="progress-extended">&nbsp;</div>
        </div>
    </div>
    <!-- The table listing the files available for upload/download -->
    <div class="jqhfu-upload-download-table">
    <table role="presentation"><tbody class="files"></tbody></table>
    </div> 
    <input type="submit" value="Formular absenden"/>
    </form>

Falls es wichtig ist das ganze ist in Wordpress umgesetzt aber in Wirklichkeit ist es eh das selbe.

Grüße, maria1