[SOLVED] V3 ajax POST upload image file

Hi, all! Help me, please!!!
I was read all topics with this problem, but not understand that happens…
I don’t receive answer from server in post request.

HTML code is:

<form id="imageForm" action="javascript:void(0)" enctype="multipart/form-data">
  <input type="file" id="input" name="picture">
  <input type="submit" value="Upload">
</form>

JS code is:

$$('#imageForm').on('submit', function(){
  var formDdata=document.getElementById('input').files[0];
       app.request.post('photo_load.php', { formDdata: formDdata  },
         function (data){    
          console.log( data );
         });
});

I successfully receive the file object before sending. But after post request i have nothing.
For test, i used small PHP code:

<?php
  $formData=$_POST['formData'];
  exit($formData);
?>

return - null! Tell me, please, why?

In your code you have the data as app.request.post(‘photo_load.php’, { formDdata: formDdata },

but in the php $_POST['formData']; its formData not formDdata

sorry…, i’m don’t understand you…
formData is sent, but why are not received by the server?

You are sending the data as a variable called formDdata and then your PHP is looking for a value called formData. You have an extra D in the first one.

on the server do $_POST['formDdata']; or change your js to app.request.post('photo_load.php', { formData: formDdata },

I’m sorry, I made a mistake when entering the question. Now i wrote simple:

		$$('#imageForm').on('submit', function(){
		  var f=document.getElementById('input').files[0];
		       app.request.post('php/photo_load.php', { f: f  },
		         function (data){    
		          console.log( data );
		         });
		});

in php for example, i take all array:

<?php
$f=$_POST;
exit(print_r($f));

the no effect (

I try this variant:

		$$('#imageForm').on('submit', function(){
		  var f=document.getElementById('input').files[0];
		    app.request({
		    url: 'php/photo_load.php', 
		    method: 'POST', 
		    data: f,
		    cache: false, 
		    dataType: 'application/json', 
		    mimeType: 'multipart/form-data', 
		    contentType: false,
		    processData: true, 
		    success: function (data){
		      console.log(data);
		      }
		    });
		});

maybe i used component page, and data not transfer permanently?
I found that no data was being transmitted in the request. This post request start, but not working (

app.request.post is working, any data transfering, but file data is not transmitted!

Help, please, 10 hours was have no results((

Hi!

You use Phonegap?

hi!
No, i create web application

Try this

...
contentType: 'multipart/form-data',
...

http://framework7.io/docs/request.html#api

app.request does not transmit even plain text…
app.request.post transfering data but the syntax for setting parameters is not clear here

…I usually use app.request.post default
is it possible to set the parameters in app.request.post ?

1 Like

I got an array on the server:

$$('#imageForm').on('submit', function(){
  var f=document.getElementById('input').files[0];
	var FData = new FormData();
	FData.append('files',f);    // this is main row
    app.request({
    url: 'php/photo_load.php', 
    method: 'POST', 
    data: FData,
    cache: false, 
    dataType: 'application/json',
    crossDomain: true, 
    contentType: 'multipart/form-data',
    processData: true, 
    success: function (data){
      console.log(data);
      }
    });
});

in php used not $_POST, used $_FILES:

exit(print_r($_FILES['files']))

getting

Array
(
    [name] => test.jpg
    [type] => image/jpeg
    [tmp_name] => /tmp/phpfAIfTn
    [error] => 0
    [size] => 49751
)

…it was epic))

1 Like

This shortly variant is working too:

  var f=document.getElementById('input').files[0];   /// form input type="file"
  var id=document.getElementById('id').value;        /// form input type="number"
  var FData = new FormData();
  FData.append('files',f);    /// for file object (on server in $_FILES['files'])
  FData.append('id',id);      /// for other data (on server in $_POST['id'])
    app.request.post('php/photo_load.php', FData, function (data) {
      console.log(data);
    });

maybe this help somebody…

5 Likes
app.dialog.progress();
var formData = new FormData();
formData.append('ppic', $$('#ulppic').prop('files')[0]);
app.request.post('https://www.abc.com/upload.php', { data: formData, async: false, cache: false, 
contentType: false, enctype: 'multipart/form-data', enctype: 'multipart/form-data', processData: false}, 
function (data) {
app.dialog.close();
});