How to add an Image to MySQL with Ajax

Question

I'm new here and this is my first "web-project". The code you see works so far. It's possible to add text, dates etc. from my website to a MySQL database. Now I want to Upload an Image to the data set. I would like to save the image on the local server and put the direction to the database. But how?

Any ideas?

Best, Iven

index.html:

...
   <input class="input-group" enctype="multipart/form-data" type="file" 
          name="event_img" id="event_img" accept="image/*" />
...

eventhandler.js:

...

$("button#insert").click(function () {

    var eventData = {

        action: "insert",

        event_name: $('#event_name').val(),
        event_location: $('#event_location').val(),
        event_date: $('#event_date').val(),
        event_time: $('#event_time').val(),
        event_weblink: $('#event_weblink').val(),
        event_text: $('#event_text').val(),
        event_genre: $("input[name='event_genre']:checked").val()

    }

    $.ajax({
        type: "POST",
        url: "/Blik/crud.php",
        data: eventData,

        success: function (msg) {
            var obj = $.parseJSON(msg);
            if (obj.message) {
                $("#footerfeedback").text(obj.message);
            } else {

...

                $("#footerfeedback").text(outstr);
            }
        }
    });
});

...

crud.php:

            ...


            try {
                $sql = 'INSERT INTO events SET

                event_name = :event_name, 
                event_date = :event_date,
                event_time = :event_time,
                event_location = :event_location,         
                event_text = :event_text,
                event_weblink = :event_weblink,

                event_genre = :event_genre';


                $s = $pdo->prepare($sql);
                $s->bindValue(':event_name', $_POST['event_name']); 
                $s->bindValue(':event_date', $_POST['event_date']); 
                $s->bindValue(':event_time', $_POST['event_time']); 
                $s->bindValue(':event_location',$_POST['event_location']); 
                $s->bindValue(':event_text', $_POST['event_text']); 
                $s->bindValue(':event_weblink', $_POST['event_weblink']); 
                $s->bindValue(':event_genre', $_POST['event_genre']); 
             //   $s->bindValue(':event_img', $_POST[$target_file]); 

                $s->execute();


                $response = array('message' => 'insert done');
...

can you make this into a js-fiddle, and post a link? I was almost inclined to do so, to help, but i only have so much time in a day. :-) — blamb, Jan 21 '17 at 20:15

score 1 · Answer 1 · edited May 23 '17 at 12:01

1

You need to upload the image to your server with a separate ajax call and insert the file or its path on success to input in the form, And submit it like you are doing it already. see here for more help one how to upload files using ajax. I hope it helps.

edited May 23 '17 at 12:01

Community

1
1

answered Jan 21 '17 at 20:17

sT0n3

125
2
13

ok this makes totally sense. thank you! – Jan 21 '17 at 20:25

How to add an Image to MySQL with Ajax

1 Answers1