Upload picture using php and jquery without a submit button

Question

I am creating a project and I want the user to change his/her profile picture so actually what I did is when I hover on the profile picture a change picture button will appear but when I click at it and select the file it doesn't get uploaded.

This is my JQuery code:

    $(document).ready(function(){
        $('#file').change(function(){
               var name = $('#file').attr('name');
               $.ajax({
                  url: 'demo.php',
                  type: 'POST',
                  data: ({'filename':name}),
                  processData: false,
                  contentType: false,
                  beforeSend: function(){
                      $('#show').html('Loading...');
                  },
                  success: function(data){
                      $('#show').html(data);
                  }
               });
           return false;
        });
    });

HTML code:

<div id='show'></div>
<form action='demo.php' id='form' method='POST' enctype='multipart/form-data'>
    <input type='file' id='file' name='file'>
</form>

PHP code:

include "connect.php";

 if(isset($_FILES['file'])){
    $file = $_FILES['file'];

    // File properties
    $file_name = $file['name'];
    $file_tmp = $file['tmp_name'];
    $file_size = $file['size'];
    $file_error = $file['error'];

    //Extension
    $file_ext = explode('.', $file_name);
    $file_ext = strtolower(end($file_ext));

    $allowed = array('jpg', 'png');

    if(in_array($file_ext, $allowed)){
        if($file_error === 0){
            if($file_size <= 2097152){
                $new_file = uniqid('', true) . '.' . $file_ext;
                $file_destination = 'profile_pictures/' . $new_file;

                if(move_uploaded_file($file_tmp, $file_destination)){
                    echo $file_destination;
                }
            }
        }
    }
}

Have you looked at [this stackoverflow question](https://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery) it seems similar to yours. — Nilithus, Jul 31 '14 at 03:32
you have to pass whole file object to php file, because when you call php file with ajax call; you cant able to get FILE object using $_FILE. so you have to pass whole $("#file") with a data in ajax call — YashPatel, Jul 31 '14 at 03:52

score 0 · Answer 1 · answered Jul 31 '14 at 02:33

Which browsers are you targetting? Ajax file upload isn't widely supported by browsers yet; notably Internet Explorer. If you need wider support for browsers, you should consider adding a target attribute to the form, pointing to the id of a hidden iframe, and use javascript to programmatically submit that form when a file is chosen instead of attempting to use ajax.

If you need to use ajax and don't mind the limited browser support, you might want to consider setting the "data" property to an instance of FormData. FormData will serialize the specified form to key/value pairs, including any file upload fields, and is supported by jquery's ajax mechanism out of the box.

Ok. Your browser should support the FormData API then. The accepted answer here should help you out if you need help using FormData: http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax — Robert Lee, Jul 31 '14 at 03:48

Upload picture using php and jquery without a submit button

1 Answers1