FormData Ajax转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.

Answer 1

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