how to work with image upload in php?

[eufrauzino]

I wonder if there's a practical example of how to use the file upload, I tried to do so and not worked: .... image: { title: 'Foto', edit: true, input: function(data) { return ''; }

          },

.....

action: else if ($_GET["action"] == "create") {

    $image=$_FILES['image']['name'];

    $result = mysql_query("INSERT INTO acao(...,...,...,...) values(...,$image,....)

This is a register of members of a club and would like to have a column with a picture of each partner. I am Brazilian and my English is basic so I used the google translator to help me. From already thank you

[Xinne]

Hi i don't know your name,

First of all, you should return a image input element in your js function, so someone can actually pick a image to upload.

Second, what happens here (in your php) is that the name of the image is saved in the DB, the actual image is destroyed after the script ends (or at the next garbage round, doesnt matter. it's gone.)

W3schools tutorial on file upload to filesystem

Article on saving images in databases using the BLOB format

Both articles are no step-by-step guides on how to implement BLOB image uploading in jtable, but if you haven't got a clue on file uploading, you'll get nowhere!

Good luck!!

[eufrauzino]

Xinne thanks for the reply but this code the name of the image is not saving in the database, and this is one of the problems!

[Xinne]

Hi,

    input: function(data) {
        return '';
    }

jTable shows the return value of input on the form... So on your form, there should be no input visible, or am i wrong?...

    input: function(data) {
        return '<input type="file" name="image" style="width:200px" value="' + data.value + '" />';
    }

should do the trick...

[kameswaran]

image not save in the db and how post input type=file using jtable ... .....................js.file............ travel_logo: { title: 'LOGO', list: false, width: '5%', input: function(data) { return ''; } ..................php file .................... else if($_GET["action"] == "create") { $target = "logo/"; $target = $target . basename($_FILES['travel_logo']['name']); move_uploaded_file($_FILES['travel_logo']['tmp_name'], $target);
$pic=($_FILES['travel_logo']['name']); print_r($pic);

db(insert($pic))...

[ashmohd]

just Followe these steps 1.add this code to jtable javascript code below field image_upload: { title: 'P. Image', list:true, width: '20%',

                     display: function (data) {
                  return '<div id='+ data.record.PersonId + '><form id="form'+ data.record.PersonId +'" method="post" enctype="multipart/form-data" action="ajaximage.php"><input type="file" name="photoimg" id="'+ data.record.PersonId +'" class="upload"/><input type="hidden"  value="'+ data.record.PersonId +'"/></form></div><div id="preview'+ data.record.PersonId +'"></div>';
                       }

in "data.record.PersonId" PersonId is return by jtable from database

2. download script from
   http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html
3. unzip the folder
   copy paste a file jquery.form.js from and include this file to you page

4. add this code to header

   $(document).ready(function() {

        $('.upload').live('change', function()          { 
           var id=this.id;
               $("#preview"+id).html('');
            $("#preview"+id).html('<img src="img/loader.gif" alt="Uploading...."/>');
         $("#form"+id).ajaxForm({
                    target: '#preview'+id
        }).submit();

        });
    }); 

1. make folder name uploads to store your file or customize it to ajaximage.php
2. copy paste loader.gif from unzip directory to your directory and enjoy

[mamirmugal]

i have found a way out of this we can use FormData object https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects

here is the js code

// just a test url
var baseurl = "http://localhost/test/";
$(document).ready(function() {
    $('#tblGrid').jtable({
        title: 'Test',
        paging: true,
        pageSize: 10,
        sorting: true,
        multiSorting: true,
        actions: {
            // simple ajax call to get the list of users
            listAction: baseurl + 'user/get_list',
            createAction: function(postData) {
                return $.Deferred(function($dfd) {
                    // we need fonm object to send by ajax
                    // luckly i have only one form on my page :D
                    var formData = new FormData(document.forms[0]);
                    $.ajax({
                        url: baseurl + 'user/add',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: 'json',
                        success: function(data) {
                            $dfd.resolve(data);
                        }
                    });
                });
            },
            updateAction: function() {
                return $.Deferred(function($dfd) {
                    // same for upload
                    var formData = new FormData(document.forms[0]);
                    $.ajax({
                        url: baseurl + 'user/update',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: 'json',
                        success: function(data) {
                            $dfd.resolve(data);
                        }
                    });
                });
            },
            deleteAction: baseurl + 'user/del'
        },
        fields: {
            id: {
                key: true,
                list: false
            },
            name: {
                title: 'Name',
                width: '50%'
            },
            img: {
                title: 'Img',
                width: '50%',
                display: function(data) {
                    return "<img src='" + baseurl + "content/uploads/" + data.record.id + "/" + data.record.img + "' width='50' >";
                },
                input: function(data) {
                    // data.value will be undefined on create method so we will show only input file tag
                    if (typeof data.value === "undefined") {
                        return '<div><input type="file" name="photo" id="photo" class="upload"/></div>';
                    }
                    else {
                        // on edit method we will show the image and the input file tag
                        return '<div><input type="file" name="photo" id="photo" class="upload"/></div>'+
                               '<div><img style="margin:5px;" src="' + baseurl + 'content/uploads/' + data.record.qid + '/' + data.value + '"  width="50" /></div>';
                    }
                }
            }
        }
    });
    $('#tblGrid').jtable('load');
});

I am using Codeigniter to upload the image and below is the php code

// getting the absolute path
$server_path = dirname($_SERVER["SCRIPT_FILENAME"]) . "/content/uploads/";
$config = array(
    'upload_path' => $server_path,
    'upload_url' => base_url() . "content/uploads/",
);
// loading library
$this->load->library('upload', $config);
// uploding the "phone" 
if ($this->upload->do_upload('photo')) {

    // adding to db
    $user_obj = array(
        "name" => $this->input->post("name"),
        "question_img" => $file,
    );
    $this->user_model->save_user($user_obj);
    $_id = $this->db->insert_id();

    $user_list = $this->user_model->get_user($_id);
    echo json_encode(array("Result" => "OK", "Record" => $user_list));
}

[olivluca]

Instead of document.forms[0]

you can use

document.forms.namedItem('jtable-create-form') in the createAction and document.forms.namedItem('jtable-edit-form') in the updateAction.