Thursday, September 18, 2014

jquery ajax file upload php

This is HTML part:

<input id="sortpicture" type="file" name="sortpic" />

<button id="upload">Upload</button>

A PHP script is necessary to put the file uploaded to the server in the uploads directory. The jQuery ajax function directs the form data to the particular file that handles the upload.

$('#upload').on('click', function() {
    var file_data = $('#sortpicture').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data)
    alert(form_data);                             
    $.ajax({
                url: 'upload.php',
                dataType: 'text',
                cache: false,
                contentType: false,
                processData: false,
                data: form_data,                         
                type: 'post',
                success: function(data){
                    alert(data); 
                }
     });

});

upload.php:

<?php

    if ( 0 < $_FILES['file']['error'] ) {
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
        move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
    }


?>

A couple things about the destination directory: 1) make sure you have the correct server path, and 2) make sure it's writeable.

No comments:

Post a Comment