FormData ajax to php

Question

hi guys i have a problem with the system that i'm currently work.
I'm sending data through ajax. and the problem is that when i'm trying to echo out the data that i'm send in php file there was an error of undefying variables but when i'm var_dumping in php it shows me this array.

array(20) { ["------WebKitFormBoundaryaw2Fqe4TLPU8WGtM Content-Disposition:_form-data;name"]=> string(948) ""pimage"; filename="C:\fakepath\2772.png" Content-Type: image/png ?PNG IHDRæ$?sBIT??O? pHYsp#p#{??tEXtSoftwarewww.inkscape.org?? string(0) "" ["'()*_,-_/0123456789:;<"]=> string(415) ">?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????6?'??IDATx???{T???? DV!?ZT??*Ÿ??,[!PQQ?U?T?`??-$@???? ???(??@(QH???>O???ibf?{?wy?????=???{?5Z??v?????? H?'I=?w???$???#NfT?c?Q?gV?????? string(5) "?)?%"" ["M?b?C?ry??z?`????#h?gVxA??2?? ??$??*??_6EfyA?a?eI`??"nz,n???????????^?LE??Xh6_pbT?hJ?#rZ??VDN?)`"???? ?k? ?y?_rZl?"]=> string(161) "dN??.???'?.?????.?k?9A`52'???p???Š?"tJ? ??:%Z^??]?d"sR?9?? sR?]?dN???A7?B'ŽA?32'E?0 ??o??B??? ?k?81ZZ?B$N?^??6?!????N?9A`4?" ["G??_ydtp??"m?t9T?"H?"??*?1¦I??_??XD?_h?4??i?01??f??3?]?) ?Z`sk$i5|?JB??n?h????h?"]=> string(0) "" ["?ˆ??>t? ???9?????Ws???? string(0) "" ["??????? ?;Dh?n?@t?4@???$h?n?(???-?"]=> string(946) " 7?,?V?FPh?MPHO????j?X ^^#a??4@M?,???a??P?x?K?m5?(???@k h????D,?V??2,?O??

??@??DdX???????-?b????a????a??0?a???%?a????a??P??@k h??@[ ??a??0 ?a?????c?9S?O??N?2,?V P{^%d????a?????JHKT???j???4Rh??4@EhY - PQ?1?,???(14f????@[ x?a?????de?||Gv???@[ 8??@k HEdX??tDdX???D?XF??/ j>??k????u?J[?~?]k}?85?? |-?"L?)?~-mF????s?0q??-?cH?8??-@o$L-@??>???k?@h?r?(?@h?r?(?@h?r?h?@h?r??f?????@h?r string(193) "?u??"?SX?x ?SIgz?Xh@8??Id???P:???CB9?? ????{????;5 %???'??$;?T$????8???Ch@?X??/ E?4`Gk5??$??i@?w???5?"'; ??0????4`6?????GpR??????????N??Ep?5`" ["????n (?(??N?tAp?5`4???N??Ep?5??)??N o_?3????n ????ª"]=> string(0) "" ["????a??4?/??"]=> string(0) "" [" ??^? ?c?\??i?M?CX1?t`U"]=> string(0) "" ["?7?_??g#?/??~_C??_c??s?)yl???"?s????s??qb_??_?????#??1ue??1_???9?e?4?p9wLMJ4?M?C??4E?_?Q?4??D!?^?~4;?e?jY???n?U ?6?]?a??a??/?a????'??~????????6O9??{?wb?,fj?????9?_??6??vA??????,vPz??o?{fn?H???,??Cki ??f??7?z??????y5Y?;?r?? "]=> string(175) "??c???2????7?-j)?O???t~?>j??n???k/?????'? ? ?[????U?S?~UZ?????qn???????>?a?0? ?s#??w?=?Y?;:?R?W??v???Q??????a4???? t???}\???b?u1???x??\?z??^?1?" ["?q????f?<)'??;@?E3]"]=> string(32) "I?>!???:c9?????)?gX?a?~?" ["?L????Dx%???t??Dx??_???'????-?p??O?WL?T?K??#^??'G"{"]=> string(82) "]G?ry?ifP?r???;n??D?R??? ?p??@??m???@Sw???B??m"?7?y?????_?Zn?." [">?b??>??"]=> string(409) "!? 7:M?7?y???????$~?0????;?e(???0?E????g.?P??t}"?>?????q]??Y? 0RD?Bg???0n/wh"?w??D?;?m?????~G??g?? 0DH?pG?<?c?:??.?? ??N??????i???I C???r?Ÿ?? r?%?#??}???????w??]G??wE9?BV???'??F??}???<@?,'?}#V?8???n?a????????? .;~??iq??)p?M?-?@??xN?G????H*??d ?j?????????1IU????)??F,????????W[?,?y##???`?o8???!?????ulg?\?{??1?[:9b?S'??????w\?}?n???????q?z" ["?q?"]=> string(0) "" ["U1:???4?????{Y4?M??R]??J*??????m_?~??]T???????J???????_????I7????1n??q??$?0??Ow?x¬x??y?v?(x?????"]=> array(1) { ["_z??%?u05?:????q?????"]=> string(452) ""pname" test ------WebKitFormBoundaryaw2Fqe4TLPU8WGtM Content-Disposition: form-data; name="psupplier" 1 ------WebKitFormBoundaryaw2Fqe4TLPU8WGtM Content-Disposition: form-data; name="pquant" 123 ------WebKitFormBoundaryaw2Fqe4TLPU8WGtM Content-Disposition: form-data; name="pprice" 123 ------WebKitFormBoundaryaw2Fqe4TLPU8WGtM Content-Disposition: form-data; name="pdate" 2017-12-26 ------WebKitFormBoundaryaw2Fqe4TLPU8WGtM-- " } }

here's my ajax code.

function getName(key)
{
    key = document.getElementsByName(key)[0];
    return key;
}

function getId(key)
{
    key = document.getElementById(key);
    return key;
}

function message(id, message, color = 'black')
{
    getId(id).style.color = color;
    getId(id).innerHTML = message;
}

function loadImage(handler)
{
    if(handler.files && handler.files[0])
    {
        var reader = new FileReader();

        reader.onload = function(e)
        {
            getId('productImagepreview').src = e.target.result;
        }

        reader.readAsDataURL(handler.files[0]);
    }
}

function xhrCreateProduct()
{
    var url = getId('formcProduct').getAttribute('action');

    var image = getName('prodimage');
    var name = getName('prodname');
    var supplier = getName('prodsupplier');
    var quantity = getName('prodquant');
    var price = getName('prodprice');
    var date = getName('proddate');

    var imagevalue = image.value.trim();
    var namevalue = name.value.trim();
    var suppliervalue = supplier.value.trim();
    var quantityvalue = quantity.value.trim();
    var pricevalue = price.value.trim();
    var datevalue = date.value.trim();

    var valid_image = imagevalue.substring(imagevalue.lastIndexOf('.')+1).toLowerCase();


    if(imagevalue == null || imagevalue == '')
    {
        message('msg_pimage', '* Provide product image', 'red');
        image.focus();
        return false;
    }
    else
    {
        message('msg_pimage', '');
    }

    if(valid_image != 'jpg' && valid_image != 'png' && valid_image != 'gif')
    {
        message('msg_pimage', '* File is not an image type', 'red');
        image.focus();
        return false;
    }
    else
    {
        message('msg_pimage', '');
    }

    if(namevalue == null || namevalue == '')
    {
        message('msg_pname', '* Provide product name', 'red');
        name.focus();
        return false;
    }
    else
    {
        message('msg_pname', '');
    }

    if(suppliervalue == null || suppliervalue == '')
    {
        message('msg_psupplier', '* Provide product supplier', 'red');
        supplier.focus();
        return false;
    }
    else
    {
        message('msg_psupplier', '');
    }

    if(quantityvalue == null || quantityvalue == '')
    {
        message('msg_pquant', '* Provide product quantity', 'red');
        quantity.focus();
        return false;
    }
    else
    {
        message('msg_pquant', '');
    }

    if(pricevalue == null || pricevalue == '')
    {
        message('msg_price', '* Provide product price', 'red');
        price.focus();
        return false;
    }
    else
    {
        message('msg_price', '');
    }

    if(datevalue == null || datevalue == '')
    {
        message('msg_pdate', '* Provide the date product come', 'red');
        date.focus();
        return false;
    }
    else
    {
        message('msg_pdate', '');
    }

    var xhr = null;

    if(window.XMLHttpRequest)
    {
        xhr = new XMLHttpRequest();
    }
    else
    {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    var sendData = new FormData();

    sendData.append('pimage', image.files[0], imagevalue);
    sendData.append('pname', namevalue);
    sendData.append('psupplier', suppliervalue);
    sendData.append('pquant', quantityvalue);
    sendData.append('pprice', pricevalue);
    sendData.append('pdate', datevalue);


    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(sendData);

    xhr.onreadystatechange = function()
    {
        var OK = 4;
        var DONE = 200;

        if(xhr.readyState == OK && xhr.status == DONE)
        {
            //var response = JSON.parse(xhr.responseText);
            document.write(xhr.responseText);
        }
    }
}

here's my html code

<form id="formcProduct" action="<?= URL; ?>product/create" method="post" enctype="multipart/form-data" onsubmit="return false;">
          <div class="form-group">
            <div class="form-row">
              <div class="col-md-6">
                <img id="productImagepreview" class="form-control customcss_image_size" src="<?= Setting::imageLocation('public/product_image/no_photo_1x.jpg'); ?>" />
                <label for="exampleInputImage">Select an image</label>
                <input class="form-control" id="exampleInputImage" name="prodimage" type="file" onchange="loadImage(this);" accept="image/*">
                <span id="msg_pimage"></span>
              </div>
              <div class="col-md-6">
                <label for="exampleInputPname">Product Name</label>
                <input class="form-control" id="exampleInputPname" name="prodname" type="text" aria-describedby="nameHelp" placeholder="Enter Product name">
                <span id="msg_pname"></span><br/>

                <label for="exampleInputSupplier">Select Supplier</label>
                <select class="form-control" id="exampleInputSupplier" name="prodsupplier">
                    <?php
                        if(sizeof($this->productSupplier) > 0)
                        {
                            foreach($this->productSupplier as $ps)
                            {
                                echo '<option value="'.$ps['col_id'].'">'.$ps['col_supplier_name'].'</option>';
                            }
                        }
                    ?>
                </select>
                <span id="msg_psupplier"></span><br/>

                <label for="exampleInputQuantity">Quantity</label>
                <input class="form-control" id="exampleInputQuantity" name="prodquant" type="number" aria-describedby="nameHelp" placeholder="0">
                <span id="msg_pquant"></span><br/>

                <label for="exampleInputPrice">Price</label>
                <input class="form-control" id="exampleInputPrice" name="prodprice" type="text" aria-describedby="nameHelp" placeholder="&#8369; 0.00">
                <span id="msg_price"></span><br/>

                <label for="exampleInputLastName">Date</label>
                <input class="form-control" id="exampleInputLastName" name="proddate" type="date">
                <span id="msg_pdate"></span>
              </div>
            </div>
          </div>
          <input type="submit" class="btn btn-primary btn-block" value="Create Product" onclick="xhrCreateProduct();" />
        </form>

here's my php file where fetching all the datas that i'm sending

var_dump($_POST);
var_dump($_FILES);

and by the way i have another problem the image file it gives me no result when i'm var_dumping it. but it shows in post var_dump value.

We strictly using native javascript, we don't recommend using jQuery. or other 3rd party.

echo can not print an array.Use var_dump() or print_r() instead. And for your second question check if file uploading is on in your php.ini file. https://stackoverflow.com/questions/3586919/why-would-files-be-empty-when-uploading-files-to-php — AL-zami, Dec 26 '17 at 07:12
but i want them to save on my database that is why i want to get them in specific data. i think it is not good way to explode or implode them. — kim-dev, Dec 26 '17 at 09:00
and fyi, i created a custom mvc framework do you think the .htaccess file prevented the file to upload? cause if you can see the file is already sent in the fake folder which is the file sending correctly but the problem is that if I var_dump it $_FILES it shows me nothing. — kim-dev, Dec 26 '17 at 09:23

score 0 · Accepted Answer · answered Dec 28 '17 at 02:15

0

instead of putting a request header in ajax. why not to remove it?

answered Dec 28 '17 at 02:15

kim-dev

17
6

FormData ajax to php

1 Answers1

Linked