upload a file using jquery post and php

Question

trying to upload a file without using a form and using $.post to transfer the file
I suppose the problem is on php side, but I'm not sure

<input type='file' id='inpfile'>

$(inpfile).on('change', function(){
    var fd = new FormData();
    var file = $(inpfile)[0].files[0];
    fd.append('file', file);
    fd = JSON.stringify(fd);
    $.post('pro.php', {fn: 'upload', args: [fd]}, function(data){
        console.log(data);
    });
});

pro.php

if(isset($_POST['fn'], $_POST['args'])){
    $fn = $_POST['fn']; $args = $_POST['args'];
    $fn(...$args);
}

function upload($fd){
    $fd = json_decode($fd);
    $fname = $fd->file;
    $destination = 'upload/' . $fname;
    move_uploaded_file($fname, $destination);
}

your code is as insecure as it gets, from arbitrary file uploads to arbitrary function execution, you need to protect fn: 'upload' from fn: 'exec', args:['rm . -Rf'], or fn: 'mail', args:['[email protected]', 'subject', 'message'] etc — Lawrence Cherone
– Lawrence Cherone, Commented Jun 12, 2021 at 3:55

Prakhar Gyawali · Accepted Answer · 2021-06-12 05:54:46Z

1

you cannot upload file simply with $.post method and form data when changed to string cannot send file. you need to add contentType:false and processData:false, and remove this code fd = JSON.stringify(fd); Moreover, your jquery does not recognize the change since you have not addressed it properly. it should be $('#inpfile').on('change', function() instead of just $(inpfile).on('change', function()

you can try this code.

<input type='file' id='inpfile'>

$('#inpfile').on('change', function(){
        var fd = new FormData();
        var files = $('#inpfile')[0].files;
           fd.append('file',files[0]);
           $.ajax({
              url: 'pro.php',
              method: 'post',
              data: fd,
              contentType: false,
              processData: false,
              success: function(response){
            //your code.....
                 }
            
           });     
});

and in the PHP server side you check it with files method instead of post method. that is

 if(isset($_FILES['file']['fd'])){
    your code.......
    }

answered Jun 12, 2021 at 5:54

Prakhar Gyawali

5554 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

qadenza Over a year ago

$(inpfile) of course works. Also - on php side - $_FILES['file']['name'] - and it works. Are you sure it is not possible using $.post ?

Prakhar Gyawali Over a year ago

ok good to know. $.post requires a form plugin to upload file which is an extra overhead. $.post sends the data in a serialized form through which files cannot be sent. please mark the post as solved if it solved your problem.

Collectives™ on Stack Overflow

upload a file using jquery post and php

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related