How to save image on server sent with POST ajax

I am sending the image through $_POST with ajax to my script. In the $_POST array it shows like:

array(14) { ["-----------------------------2069664522469231826739095988 Content-Disposition:_form-data;_name"]=> string(389) ""mobileImage"; filename="art-mob-pic.jpg" Content-Type: image/jpeg ÿØÿàJFIFddÿìDuckyZÿîAdobedÀÿÛÿÀFÿÄ¤  !A1" Qa¡2BqÁRÒ$á" [" "]=> string(0) "" ["õsÁ6Ú'BÈ/¶¤ªÉ_ã ÖlñäÜÛq!q1M%ðI'kB,î®-*Ô"]=> string(0) "" ["S#Å^8)Ó}·RÝmãRÍ"]=> string(0) "" ["ý£±-vvÈ-7iM·¼ string(448) "Ø¸Z2ûd³ivÜ·]*q-º²ðW)=¤pã[G';ë k)e3¸ðaÙÁÀÎºEýÝßÝjXnO Kè Ä1rÝAÄéi²/ ¾à~[ëíÿxë¿óy æÖ½Ot¼{2þ²TÕqzp§µHÃO4B¥=¤w ×òþïý MÃg>¥j_}2¼HÕÍÈÉªËíÖ;è²Ý`ÖõbM9ÏÄè#='1Áu{£wF'¾õn#µ°,K^mô³.#ë-q¢¤¨²ûKA õã®£´niN¾ qbÄAÆ÷°ÙÝÎ¡-!ÆDt#ÀUÞKW¯ÔVÅkïøÑ¯D¢%(DJ"QD¢%(DJ"QD¢%(DJ"Q£ t®T mP¬S êI«Õj;ÎýódÆ2Ë¦±^0.ùâÔi¾=ìlö·ÉKï4ANº¡Ú~ä^g`e-ãÖ©Øuñ¾ùß¥uÖÚøúÚqJÀsÛl;®¯ÙQîC¼)âµJi i" ["#ñÝO¶´©]Àä_o´ÝÔ¶gíß7ùg_Í×ÚéÄKbý%A'eåoÚ>ò·_IÏ-ÿ"]=> string(179) "I;§Ù[»,ÛMmäöØÐ¶®Íl§Ã0íÖôÈ2fØÔÀ!ix®ÈïBÁTEO*ð{~ñ Bô®©^þ9Åkð©;¤%à¸þßî'û.1ø[Ósg~-Fÿ-9¹ý3¥ Ai9ºè³ìæXfMä÷y2`k EÞwãó]jEËÌ-íNp´d(/þ)S)y!=¢OÛ^J«J`ê" ["#D?Äß5¹uqLÔ4LÀH5GîogËÌ_Û{»ÃÐÕ±L{ýGõøQ_¼BQD¢%(DJ"QD¢%(DJ"QD¢%(D_R9?áUB¦P*¡ZTÊG®V#WbÒÜSÇì»3ËØ²!¢ïbäÐê>#p¤©"]=> string(371) " ífT`ðWbÇ÷;V:(F6êw~°«H·Pº^ÍÉã·F5¡,%Naá!ãØö#öá>ëð®ÀæµÄv¾Dj_·Û/0üv Îc¢râÚR¾Ô² ¦Ïj)ëÖ-¼qÏÉ¬)ÓÜf X4éùÆR 8'ÌãLÉi·_ùMä¾SbBbù}æñ¹qÛ¬{×f?!çnÉïl¸ÚE vðG ìm¿l¶¯c¦ctl¼~?5ù_Ì®kØnQ)U-¨@è´2ì¿§Û6ý×«0Ío¶H°/" ["Û|Z_hf¹_vK·ÉJIáèÏ6±ùsëPK;ÊuáªäaÇõT¿±©oWDÁÇ±Ð«ÏÝùú~µ°Ô ðY DJ"QD¢%(DJ"QD¢%(DJ"QD¢_ÕQGJ}ÂSðâ® Ò£¤rxü*à¼äTp?Z©UXËö6üÜöèôÙ¨coJ$XBTÝmD¥À~<«áÁ®m»íµ?ÙÈ½9G/º¶Ñ»ÑÏQTþçÌÓîÌÝí7æÝ¬öv¦-Êã0ÃEgµ)©A#Oµ{µÿ"]=> string(27) "µTÓ«L@ÀÅÁÇ`þâ'°´©ÝX" ["½bûdi³;f TfZZe4©R }µ$¢¸ÊyGTJxøñÆýâÎÅÈÅ¥IÎ6çSfA4÷iH_¼r¿qvûþ8jNB¤¡1"]=> string(0) "" ["tùuÀæÎÇí9¯ ¸?*F®±"]=> string(0) "" ["Ò]°r`ù9NëSû5Ø¸ÆúqX$¦k#Å®*iLÈÊ_2ÓLÀu§BÑñ!<ñÏ£{6ß¸ÔÖ{ñ]}½£N%üØüÜbÿ"]=> string(317) "ÃÝß(0Ôï:Ìí6nÉm=¡ÙN¤i)Ñ5£ÄÔ#úÉß©Áo·ÿû=cßUY¤£Çl¸´±ó%ÉiL²T¥§§y A?áÀøVÏmÜ*V¸@0ð #Êö¸ÛÓ!åÌ¿_ªéýµ¿P¥1^!(DJ"QD¢%(DJ"QD¢%(DJ"Q¢¡?ÌÕUÒÓüêªL¥=?!W _G ñª«X;'Ê3¬f9j¾d®]/m×,¶¸®Ï} ëò¨¶i$8 ©¶Çíöë(@F¬Èù>'è¢;·8Ûlæa9êédL?U¯¿"~ôþ.x÷®§e¹wf ¸ÝU>¾ÍpÖÒT²{ S½Ä$8*á" ["s·Õá__iB¨iN%à;±lHËâ¥ÛÌ í,wÊ5)úztÈsÅ818NQ.Ç%z÷ Ù^|A¼üóØíºç C"]=> string(928) "Eá-ëû}ë|Ã×ÉQÞmëBÒ¤×êØï¼¬§NÐ=H5$ºFC³æ½8··û¨§qºÈLj8§3o4ÏÿN:øõ½h)ùVmÆµÆ¬Yì-¬JÞíÖë;Pkd6¤¶Óhx¼ó¾Åy¸ÏÔIÄÛ}GÉ`ûÏiDHQ¡C,r8¡gõÆèq_1õf¨#ÒøÅ» ´iÌ)D[l)ÖÖcÞRýN¼:¥¯]âá^28SheúÚ«F´Ãê« dÐ Gç^ÞMc*ëq~Ï²¦UõKmÄ¶Tò}IãÒ¹Î÷RTî_¢é¼B¥0$x±oâ°sìà¶íçâ¹*_púv«zËöÐÃÌ¤Nwp®ÓÔ£ã]sdZ2PÏòÃLÉÇô»v]Pÿ¶¦Ë)ðY DJ"QD¢%(DJ"QD¢%(DJ"QE8Úy«¥M¶TÏÕGÐU@V¼Õ²òíúuèÄZcØl¨ZV¹4ßùCkWoCÔÊµÂôÎRo¶%¾=ÖÏðDbîe@Ød<ÓvÒäû3n)Ùd{.¸;J{V¥%_($¶Ú9±¬*Æ1þàÿO[ºñØÞÓ4¥)@wcóðê¹hûïGÅÍa±¿¶®y ö3B úw~=õ.P´7*døâKYuJ8yÏ( ©:©^o¼êâFFÆ î4ZMô÷ì«É9Çàû}½µ¬!Z¸óU"S!±x´ëúD3ùÿ><ùÝªY¦·4O·¹HºÃÒmÆdfÞm¹ÝÍ±RR¤v²·À`îÕªå~Þó>MµÞÕ§¹Ù4 àTºdÚ£ÁÇìK®uËöîuBâLÕ¨t4è'I¾8yªüQÈ|z±Ãü¦ÛÌ|zK©³äW;ôñlvøi·ÙìDöË()M¡AãÕòõ¾mm»C_l¦" ["ñ}_]ÌHñ?¢ÆãÜcÛ'RÛw*u úqÀi`bN°ã3"]=> string(311) "±9u%¬6ÿ3µ¨ñ%Û7¶Ú ë«< ËÎäyÎ!)BÅ·{ûÈê ¯m÷¯qáq(^XjÈ5*t$I±=@ Ùv«óîsõ,îiÖ¨C"RlÔX`½®)k?Ç!à®ã×úèP?ö%Æþ¨ãûËbÂ¶bðaÂK²8-óü]©{»¹Ý· {yLÏÊ)GIz¼Î`Gà¢ûÅ®ÕR¸Íå2C¡øÇ÷¬ÉóÏÆÝ¡±±ÜK ÓòÌÛ»5y´w¸ÜWÜû¨.Ë¤/rGÂº·$ÛjV¤ÑÇôý±Ëï-ë=L"Cáj¿xl2öö?EÈñókÎï}Ñ®Yj¥AF:ÃM×$É #À(ôH" [" 6ÜNâµ`jHi"]=> string(1646) "]tòHÑFXýÿÂ¼ø}IçxÖ8þÂ¶e»AË¦IpþÑ §P§â%Å-ÂâI)J9CIà'vñ¦kÀâ:;·ÇÅs=Îê´éÊsHöý²] ÷ôþô©.¢¡Ì¢Õ«!(DJ"QD¢%(DJ"QD¢%(DJ"QªhO¯ Â¥¯6ÛëÇö©©B½G!Ó²´dbDs^óf±ðëóX3#¾Îönp_-/ÈPB¥·>SKQè¢º¤(sÈâ ó®mâiH±Ìïüz)ìmÅy°0 Ø@ÇwuÇ"Ëmø'ds,Ü*»Ü<8í«-×T$¤Ö×sqV¨§aãÑlwK;zT BððÃáÕj>w¦=æ~S¾$ê89µ¶Ð§îv=VV¶®Ï²][JO }!îÞîyJÒ -ÿ°;ÍÆûÇªí¶r 1Ô#|À¹N%Òã%Ì=öz×nåì ÂQ2e«Íù±bH8bÎÇ<µqäÆ¹bùbÂ/Yí¯Vh½«xrdÍÙP´1gºÇ·"Þÿ¸Gm@ ¬6ÊRøCª @ õTWÚHÛoZDÓº¡LGA|Ç ÃÍ}#¿nGî³¾¤"-ndõ%"u².9vXçÑl/Z}|ØæcÎÞ·ÞóR¡Yí1ß#±h)µ9)âP~Ç¹©k¶qSZÂ§N©OÓ5Â}Êm¿Ý×vÑ#>b ðñYw«~ÍÞêÍ ×Zúóc¾Xç36×w9%Í×Ó.:Ý%Jà¥DG©¬î·yÐ¯#*uàAÌ|üCö}n°»§sB8Õ¤^´÷ÏñuGÅ='t½â¹nQÂ÷¯®I¸asn]!O¡ô¼®Ô¯ÛuÆÒ°¤¡c½ j8¿Ûv{Zvö°ÓNè¥ÝØ=O^ªm½sýÀÈÕó$À[à>(¦%rbÅkêÌ4Ji@Ê(·ÙÉõäuâ·Ubä¨í)7GZºÛ÷ì¿4e©¯¢LúQhYT×#¥Â²AéÓÎ¡õjÌåïñ*wcFN¢0Ïgì§[!*¤{j}ä´¥©'¢ ôçêôó*eÉSøµÂ£§ÿåSòô?çøUåô¢¨qKb?½!¸Ï¬÷$QHåDÉéÔÖ-wÒ{¯Z,øä°D· Ì¹ùÙãÈc"`

My javascript looks like:

function uploadFile(field) {
                    let file = field.files[0]
                    let formData = new FormData()
                    formData.append("mobileImage", file)

                    $.ajax({
                        url: 'upload-mobile.php',
                        type: 'post',
                        data: formData,
                        contetType: false,
                        processData: false
                    })
                    .done(function(data) {
                        console.log(data)
                    })
                }

How should I extract it ? I can do it if it’s in $_FILES but seems like I don’t know how to manage it this way.

Answer

Try by passing dataType: 'json', & cache: false, into Ajax Call.

Also Add in your form tag enctype="multipart/form-data"

function uploadFile(field) {
                        let file = field.files[0]
                        //change this line with form id
                        let formData = new FormData($("#formid")[0])
                        formData.append("mobileImage", file)

                        $.ajax({
                            url: 'upload-mobile.php',
                            type: 'post',
                            data: formData,
                            dataType: 'json',
                            cache: false,
                            contetType: false,
                            processData: false
                        })
                        .done(function(data) {
                            console.log(data)
                        })
                    }

Advertisement

Answer