How To Upload File In jquery and HTML with complicated input form

Question

I knew so much duplicate question. But I don't know, how to upload it with complicated form with arrays in form. This is my html: And this jquery:

function saveDraft(){
        var scope = $('#scope').val();
        var secrecy = $('#secrecy').val();
        var priority = $('#prio').val();
        var cc = $('#cc').val();
        var subject = $('#form-field-subject').val();
        var msg = $('.wysiwyg-editor')[0].innerHTML;
        var attachment = document.getElementById('attachment');
        var refnd = $('#refnd').val();
        var refarsip = $('#refarsip').val();
        var from = $('#from').val();
        var approval = []; 
        $('.approval :selected').each(function(i, selected){ 
          approval[i] = $(selected).val(); 
        });
        var receiver = []; 
        $('.for :selected').each(function(i, selected){ 
          receiver[i] = $(selected).val(); 
        });
        $.ajax({
            type: 'post',
            url: '<?php echo $this->baseurl; ?>/memo/saveDraft',
            data: {
                scope : scope,
                secrecy : secrecy,
                priority : priority,
                from : from,
                approval : approval,
                receiver : receiver,
                cc : cc,
                subject : subject,
                msg : msg,
                attachment : formData,
                refnd : refnd,
                refarsip : refarsip
            }

You need to set formData as data to jQuery and other values from current data need to be in formData. — jcubic, Aug 25 '16 at 09:35
is it possible through i have multiple data from many select? @jcubic — Nike Yulistia Angreni, Aug 25 '16 at 09:37
You don't create formData anywhere. You need to create instance of formData and append the value of a file and other properties. — jcubic, Aug 25 '16 at 09:37
You need to try to iterate over files and use `formData.append('attachment[]', file)` take a look how to use formData [How to use FormData for ajax file upload](http://stackoverflow.com/questions/21044798/how-to-use-formdata-for-ajax-file-upload) — jcubic, Aug 25 '16 at 09:39

score 1 · Accepted Answer · answered Aug 25 '16 at 09:45

Try this:

HTML:

<input id="pic" type="file" name="pic" />
<button id="upload">Upload</button>

JS:

$('#upload').on('click', function() {
        var file_data = $('#pic').prop('files')[0];
        var form_data = new FormData();
        form_data.append('file', file_data);

        $.ajax({
                url         : 'upload.php',     // point to server-side PHP script 
                dataType    : 'text',           // what to expect back from the PHP script, if anything
                cache       : false,
                contentType : false,
                processData : false,
                data        : form_data,                         
                type        : 'post',
                success     : function(output){
                    alert(output);              // display response from the PHP script, if any
                }
         });
         $('#pic').val('');                     /* Clear the file container */
    });

Php:

<?php
    if ( $_FILES['file']['error'] > 0 ){
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
        if(move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']))
        {
            echo "File Uploaded Successfully";
        }
    }

?>

This will upload a single file to server. Make some changes so that you can upload multiple file as well.

How To Upload File In jquery and HTML with complicated input form

1 Answers1