2

I can send form_data for uploaded file with $.ajax. but when I used (input: file) how did I can send form data that be an image file that chose with input to PHP with $.post()?

<input type="file" id="img" name="img" accept="image/jpg,image/jpeg" style="display: none">
Majid Moradi
  • 37
  • 7
  • please check [link](https://stackoverflow.com/questions/10899384/uploading-both-data-and-files-in-one-form-using-ajax) to post file data –  Feb 22 '20 at 09:30
  • that link uses $ajax, I want $.post() method. @MNJ – Majid Moradi Feb 22 '20 at 09:36
  • `$.post()` is just shorthand for `$.ajax({ method: "post", ... })` – Andreas Feb 22 '20 at 09:37
  • [How can I upload files asynchronously?](https://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously) – Andreas Feb 22 '20 at 09:38
  • @Andreas thanks I know that but I didn't know how to write with $.post() method!!!! – Majid Moradi Feb 22 '20 at 09:43
  • It's literally just `$.post({ /* and here the same options as you would use with $.ajax() */ })` o.O -> https://api.jquery.com/jquery.post/#jQuery-post-settings – Andreas Feb 22 '20 at 09:47
  • @Andreas you don't understand my question! if it's simply writing code with $.post. thank you. and don't get links and others – Majid Moradi Feb 22 '20 at 09:57
  • Spend some time actually reading the content behind the links I've posted. They contain all you need to know... – Andreas Feb 22 '20 at 10:48

2 Answers2

3

You'll need to make the method of form POST and enctype="multipart/form-data"

<form method="POST" action="URL" enctype="multipart/form-data">
<input type="file" id="img" name="img" accept="image/jpg,image/jpeg" style="display: none">
</form>

Then You can get the uploaded image as $_FILES where your form is posting.

Aman Tiwari
  • 91
  • 5
0
<input type="file" id="img" name="img" accept="image/jpg,image/jpeg">

You'll need to get the file by onchange event of input

$(document).ready(function() {
    $('#img').change(function(){
        var file_data = $('#img').prop('files')[0];   
        var form_data = new FormData();                  
        form_data.append('file', file_data);
        $.ajax({
            url: "fileUpload.php",
            type: "POST",
            data: form_data,
            contentType: false,
            cache: false,
            processData:false,
            success: function(data){
                console.log(data);
            }
        });
    });
});
Aman Tiwari
  • 91
  • 5
  • _"But I need $.post()"_ comment incoming in 3, 2, 1, ... – Andreas Feb 22 '20 at 10:48
  • $.post() method is just the shorthand of $.ajax() with method POST, It'll work like this when you're talking about formdate or image upload. – Aman Tiwari Feb 22 '20 at 10:53
  • That's what I've told OP in the comments below his question. Didn't help anything yet^^ – Andreas Feb 22 '20 at 10:55
  • when i wrote $.post('file.php', { data: data }, function(data){ } ) i could n't wrote this tree options : ((contentType: false, cache: false, processData:false)) I did n't know how to write this – Majid Moradi Feb 24 '20 at 10:26