Jump to content

Unable to upload image in php using bootstrap module

javedhakim

By javedhakim
in PHP Coding Help

 Share

Recommended Posts

javedhakim Newbie

javedhakim

Posted
Posted

I am trying to add a functionality of uploading image while adding new data but I am not able to achieve it. I will provide my code to you. Could you please help me to achieve it? Following is my code,

I have three files namely index.php, script.js, func_events.php

index.php is as below,

   <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h3 class="modal-title" id="myModalLabel">Add event</h3>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" id="addEvent" method="post" role="form" action="func_events.php"  enctype="multipart/form-data">
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="inputTitle" style="padding:0px;">Title</label>
                                <div class="col-sm-5 col-sm-offset-1">
                                    <input type="text" id="inputTitle" class="form-control" maxlength="32" placeholder="Title" />
                                </div>
                                <label class="col-sm-2 control-label" for="inputTitle" style="padding:0px;">?????</label>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="inputLocation" style="padding:0px;">Location</label>
                                <div class="col-sm-5 col-sm-offset-1">
                                    <!--<input type="text" id="inputLocation" class="form-control" maxlength="26" placeholder="Location" />-->
                                    <select id = "inputLocation">
                                        <option value = "Meeting Room">Meeting Room</option>
                                        <option value = "Training Room">Training Room</option>
                                        <option value = "GM Room">GM Room</option>
                                        <option value = "Other">Other</option>
                                    </select>
                                </div>
                                <label class="col-sm-2 control-label" for="inputLocation" style="padding:0px;">??????</label>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="inputDate" style="padding:0px;">From Date</label>
                                <div class="col-sm-5 col-sm-offset-1">
                                    <input type="text" id="inputDate" class="form-control" maxlength="10" placeholder="Date" />
                                </div>
                                <div id="datepicker"></div>
                                <label class="col-sm-2 control-label" for="inputDate" style="padding:0px;">?? ?????</label>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="inputTime" style="padding:0px;">From Time</label>
                                <div class="col-sm-5 col-sm-offset-1">
                                    <input type="text" id="inputTime" class="form-control" maxlength="5" placeholder="Time" />
                                </div>
                                <label class="col-sm-2 control-label" for="inputTime" style="padding:0px;">?? ???</label>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="inputUploadFile" style="padding:0px;">Upload Image</label>
                                <div class="col-sm-5 col-sm-offset-1">
                                    <input type="file" id="fileToUpload" class="form-control" maxlength="32" placeholder="Upload File" />
                                </div>
                                <label class="col-sm-2 control-label" for="inputUploadFile" style="padding:0px;">Upload Image</label>
                            </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="add" class="btn btn-success" data-loading-text="Adding event...">CREATE</button>
                    </div>
                        </form>
                        </div>
                        //... I have closed all the divs
                        <script type="text/javascript" src="js/script.js"></script>

script.js file is as follows,

 function addEvent(date) {
    $(".modal-header").html(modalAddEvent.header);
    $(".modal-body").html(modalAddEvent.body);
    $(".modal-footer").html(modalAddEvent.footer).addClass("addEvent");
    $("#inputDate").datepicker({ firstDay: 1 });
    $("#inputTime").timepicker();
    date = new Date(date);
    date = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "/" +
           (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "/" +
           date.getFullYear();
    $("#inputDate").val(date);
    $("button#add").on("click", function() {
        form = { title: $("#inputTitle").val(),
                 location: $("#inputLocation option:selected").val(),
                 date: $("#inputDate").val(),
                 time: $("#inputTime").val()};
        title = form.title;
        loc = form.location;
        date = new Date(form.date);
        date = date.getFullYear() + "-" +
               (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-" +
               (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());
        time = form.time + ":00";
        timestamp = date + " " + time;
        if ((title && loc && timestamp) != '') {
            form_data = { 1: title, 2: loc, 3: timestamp};
            /* ,filename: form_data[19] */
            $.ajax({
                type: "POST",
                data: { action: "insert",
                        title: form_data[1],
                        loc: form_data[2],
                        timest: form_data[3]},
                url: "calendar/admin/php/func_events.php",
                beforeSend: function() { $("button#add").button('loading'); },
                success: function() {
                    $("#myModal").modal('hide');
                    alert("Event added correctly. Your request has been forwarded to the PR Department. Pending for Approval.");
                    sessionStorage.clear();
                    window.location.reload();
                },
                error: function() { alert("There was an error trying to add the event."); }
            });
        }
        else {
            alert("You must complete all the fields.");
        }
    });}

func_event.php file is as below,

  $action = trim(htmlspecialchars(mysqli_real_escape_string($link, $_POST['action'])));
    $title = trim(htmlspecialchars(mysqli_real_escape_string($link, $_POST['title'])));
    $location = trim(htmlspecialchars(mysqli_real_escape_string($link, $_POST['loc'])));
    $timestamp = trim(htmlspecialchars(mysqli_real_escape_string($link, $_POST['timest'])));
    if ($action == "select") {
        $sql = "SELECT *, DATE_FORMAT(timestamp, '%M %e, %Y %H:%i') selector,  DATE_FORMAT(toTimestamp, '%M %e, %Y %H:%i') selector1 FROM events ";
                if ($_POST['y'] !== null && $_POST['m'] !== null) {
                // Sort by Year and Month
                    $sql .= " WHERE DATE_FORMAT(timestamp, '%Y %c') = '".$_POST['y']." ".$_POST['m']."' ";
                }
                else if (isSet($_POST['y']) && $_POST['y'] !== null) {
                // Sort by Year
                    $sql .= " WHERE DATE_FORMAT(timestamp, '%Y') = '".$_POST['y']."' ";
                }
                else if (isSet($_POST['m']) && $_POST['m'] !== null) {
                // Sort by Month
                    $sql .= " WHERE DATE_FORMAT(timestamp, '%c') = '".$_POST['m']."' ";
                }
                // Search
                (isSet($_POST['search_q']) ? $sql .= " WHERE title LIKE '%".trim($_POST['search_q'])."%' " : '').
        $sql .= " ORDER BY timestamp ASC";
        $query = mysqli_query($link, $sql);
        if (mysqli_num_rows($query) > 0) {
            $data = array(); $index = 0;
            while ($recset = mysqli_fetch_array($query)){
                $data[$index] = $recset;
                $index++;
            }
            echo json_encode($data);
        }
    }
    else if ($action == "insert") {
        /* $startdate = substr($timestamp,0,10); //date('Y-m-d', $timestamp);// or your date as well
        $enddate = substr($totimestamp,0,10); //date('Y-m-d', $totimestamp); //strtotime("2010-01-01");
        $datediff = $end - $start;
        $date1 = $startdate;
        $date2 = $enddate;
        $diff = abs(strtotime($date2) - strtotime($date1));
        $years = floor($diff / (365*60*60*24));
        $months = floor(($diff - $years * 365*60*60*24) / (30*60*60*24));
        $days = floor(($diff - $years * 365*60*60*24 - $months*30*60*60*24)/ (60*60*24));
        if($days == "0")
        { */
        $sql = "INSERT INTO events (timestamp, title, location) VALUES ('".$timestamp."', '".$title."', '".$location."')";
        $query = mysqli_query($link, $sql); 
        /* }
        else
        {
           print "".++$days."";
        } */
        //File Upload
        $target_dir = "calendar/";
        $target_file = $target_dir.basename($_FILES["fileToUpload"]["name"]);
        $console::log($target_file);
        $uploadOk = 1;
        $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
        // Check if image file is a actual image or fake image
        if(isset($_POST["submit"])) {
            $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
            if($check !== false) {
                echo "File is an image - " . $check["mime"] . ".";
                $uploadOk = 1;
            } else {
                echo "File is not an image.";
                $uploadOk = 0;
            }
        }
        // Check if file already exists
        if (file_exists($target_file)) {
            echo "Sorry, file already exists.";
            $uploadOk = 0;
        }
        // Check file size
        if ($_FILES["fileToUpload"]["size"] > 500000) {
            echo "Sorry, your file is too large.";
            $uploadOk = 0;
        }
        // Allow certain file formats
        if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
        && $imageFileType != "gif" ) {
            echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
            $uploadOk = 0;
        }
        // Check if $uploadOk is set to 0 by an error
        if ($uploadOk == 0) {
            echo "Sorry, your file was not uploaded.";
            // if everything is ok, try to upload file
        } else {
            if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
                echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
            } else {
                echo "Sorry, there was an error uploading your file.";
            }
        } 
    }
    ?>
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.