Search the Community

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."; } } } ?>