Ajax Multiple Image Upload with Edit Delete using PHP Mysql

hello friends this new video tutorial from web's lesson and in this video we are going to learn how to make dynamic image gallery for making dynamic gallery we will upload multiple image without submit form that means when we have select image then it will upload it to specified folder for upload multiple image we will use JavaScript and Ajax after upload image we will insert image data like image name and title into MySQL database here we will also make edit button for change image name or image other details so here we can also change image name from front-end we do not want to go to back-end in folder for change image suppose we want to want to remove some image from database and folder also then we can also do this operation from here for this all things we have use Ajax JavaScript and query as front-end and in back-end we have used PHP and MySQL now let's start learning this topic this is our testing database and in this we have one table like image with three table column like image it image name and image description after uploading image we will insert image name and description details into this table this is our index dot PHP page and here we have already included JavaScript libraries query link and bootstrap library link also we will use both library in this page first we have defined one division tag with class is equal to table responsive and it is equal to image table first we want to load image data in table with edits and delete button under this tag so for this we have go to query code and here we have creates load image data function this function will load updated image data into division tag with add image table under this function we have write Ajax request and under this we have write first option like URL set to fetch dot PHP page here we have send request to this page in second option we have right method option and here we have used post method for send data to server lastly in this function we have write success callback function with data argument this function will receive data from server which we can access from this state to argument under this function we have write dollar with division target image table with HTML methods and under this method we have write data this code will load image state 2 under Division tag with add image table in table format with edit and delete button now first we have to make database connection so we have go to database connection dot PHP file and under this we have write dollar Connect variable is equal to new per class object with 3 argument in first argument we have write MySQL double colon host is equal to low callused and database name is equal to testing in second argument username we have write root and in password we have left blank this code will make database connection now we have go to fetch dot PHP page and here we have write include statement with database connection dot PHP file by using this statement we can make database connection on this page below this we have write dollar query variable is equal to select star from image table order by image it in descending order this is simple select query now we have write dollar statement variable is equal to database connection string with prepare statement and under this we have write dollar query variable this statement will make query for execution for execute query we have write dollar statement variable with execute method this method will execute select query for fetch query execution data we have right dollar result variable is a quilted dollar statement variable with fetch all method this method will fetch query execution day to and store into dollar result variable below this we have right dollar number of rows variable is equal to dollar statement variable with row count method this method will return number of rows in query execution now we have right dollar output variable is equal to table with six table column like serial number image image name description edit and delete button table column after this we have right if statement and under condition we have right dollar number of rows variable value is greater than zero if this condition true then it will execute if block otherwise it will execute else block suppose above condition is false then it will execute else block of code and under this way of right dollar output variable and in this we have a pend table recode with text like no data found but suppose above condition true then it will execute if block of code and under this we have right dollar count variable is equal to zero now we have write for each loop and under condition we have write dollar result variable as dollar owe variable by using this loop we can access dollar result variable data this loop first we want to increase value of dollar count variable so we have right dollar count variable is equal to dollar count variable plus one after this we have a right dollar output variable and in this we have a pend code like open and close table wrote AK between it we have write open and close table data tagging between we have right dollar count variable below this we have again right open and close table data taggant between it we have right image tag with attribute source is equal to files slash dollar Oh image name variable this code will display dynamic images from files folder after this we want to display image name so we have again right open and close table data tag and between it we have right dollar row image name variable same way we want to display image description details so we have right open and close table data tag and between it we have right dollar row image description variable now we want to make edit button so we have right button tag with attribute type is equal to button class is equal to edits and it is equal to dollar row image it variable this code will make edit button and in this we have used class edit and ended attribute we have store a majid value we will use edit class as selector inch query code same way we want to make delete button so we have right button tag with attribute type is equal to button class is equal to delete it is equal to dollar row image it variable and data image name attribute is equal to dollar row image name variable here we will use delete classes selector inch query code and we will fetch value from it and data image name attributes here we have store image data in table format in dollar output variable now we want to send this data to Ajax request so we have right echo statement with dollar output variable now we have gota index dot PHP page and here we have called load image data function here so an page has been load this function will called and it will fetch image data from server and display under division tag with attribute it is equal to image table now we have check output in browser so friends when page has been loaded into browser then we can see table with six column and here we can see no data found message on webpage now we want to upload image and fill table with image data for this we have to go to index dot PHP page here first we want to create file tack for upload multiple files without submit form so here we have write input type is equal to file with name and hit attribute is equal to multiple file for upload multiple files here we have at multiple attribute after adding this attribute we can select multiple files at the same time below this we have defined span tag with attribute it equal to error multiple files under this tag we will display validation message or image upload message now we have write query code for upload multiple files so here we have write dollar with file tag heed multiple files with change event so when we have select files then this code will execute under this first we have write error images variable is equal to blank value after this we have right form data variable is equal to new form data object we will append files data into this object and send to server for upload below this we have create one more variable files is equal to dollar with file tagged multiple file 0 index with files by using this code we store selected files property in files variable now we have write if statement and under condition we have write files variable dot length value greater than 10 if this condition true then it will execute if block otherwise it will execute else block suppose above condition true that means we have select more than 10 file and it will execute if block and under this we have right arrow images variable and under this we have append this error message but suppose selected files is less than 10 then it will execute else block of code and under this we have right for loop and under condition we have right I value is equal to 0 I value less than the value of files dot length and I variable value increment by 1 by using this loop we can fetch selected files day - one by one under this loop we have right name variable is equal to document dot get element by it method files I index dot name by using this code we can get particular image name after this we have right extension variable is equal to name variable dot split method with dot separator dot pop method with two lowercase method by using this code we can get extension of particular selected image now we have right if statement and under condition we have right query dot in array method with two arguments in first argument we have right extension variable second argument we have right allowed image file extension is equal to minus one this condition will check particular image file extension is not present in a loud file extension array then it will execute if block of code suppose selected not found in a loud extension array then it will execute if block and under this we have right tear of images variable and under this we have append this error message now we have right form data variable dots append method with two argument in first argument we have right file array as name and in second argument we have right documents dot get element by ID method files I index this code will file into form data variable with named file array we will send this form data variable value to servile Ajax below this we have right if statement and under condition we have right error image variable value is equal to blank if this condition true then it will return true otherwise it will return false if the buff can do Falls that means there is some validation error so it will execute else block of code and under this first we want to clear file tag for this we have write dollar with file tag in multiple file dot value method with blank value this code will clear selected file for display error message we have write dollar with span tag it dary multiple file with HTML methods and under this method we have write Taran images variable this will display a remem web page but suppose there is not image validation message then it will execute if block of code and under this we have right Ajax request under this first we have right URL option set to upload dot PHP page here we have send request to this URL in second option we have right method and here we have used post method for send data to server in third option we have write a two and under this we can define which data we want send to server so here we have write form data variable in fourth option we have write content type set to false it used when sending data to the server in fifth option we have set cache set to false because we want to prevent pages for cached in sixth option we have set process data set to false it is used for send data file to server after this we have write before send callback function this function will be called before request has been sent to server under this function we have right dollar with span tag it dary multiple files with HTML method and under this method we have write this message and lastly we have write success callback function this function has been called if request completed successfully this function first we want to display success message so we have right dollar with span tag it dary multiple files with HTML method and under this we have write this success message after this we want to display updated image day 2 on webpage so we have called load image data function now we have go to upload dot PHP file and here we have write include statement with database connection dot PHP file this code will make database connection after this we have write if statement and under condition we have write count function with dollar files file and name value is greater than 0 if this condition true then it will execute if block of code and under this block we have rightful OOP and under condition we have right dollar count variable value is equal to zero dollar count variable value less than count function with dollar files file and name and dollar count variable value increment by one by using this loop we can access all selected files under this loop we have right dollar file named variable is equal to dollar files file name and dollar count variable by using this code we can get particular image name below this we have right dollar temporary name variable is equal to dollar files file temporary name and dollar count variable this code will return temporary name of selected image now we have rightt doll a file array variable is equal to explode function with two arguments like dot and dollar filename variable this code will make an array from dollar filename variable after this we want to get selected file extension so we have write doll a file extension variable is equal to end function and under this we have write dollar file array variable now we want to check image with same name is already uploaded or not so for this we have make file already uploaded function with two arguments like dollar file name variable and dollar connect variable under this function we have right dollar query variable is equal to select star from image table where image name is equal to dollar file name below this we have a right dollar statement variable is equal to dollar Connect variable with preparer statement with dollar query variable this code will make query for execution for execute query we have right dollar statement variable with execute method this method will execute query after this we have right dollar number of roads variable is equal to dollar statement variable with row count method this method will return number of rows in query execution now we have right if statement and under condition we have right dollar number of rows variable value is greater than zero if this condition true then it will return true otherwise it will return false now here we have right if statement and under condition we have right file already uploaded function with two arguments like dollar file name and dollar connect variable this condition will check if selected file name already found in database then it will execute if block of code under this block now we want to create new image name so we have right dollar file name variable is equal to dollar file array with zero index dot R and function dot dollar file extension variable this code will make new file unique file name and store into this dollar file named variable now we have right dollar location variable is equal to files folder name slash dollar file name variable here we have make path for upload file after this we have right if statement and under condition we have right move uploaded file function with two arguments like dollar temporary file name and dollar location variable if image successfully uploaded into folder then it will execute if block of code under this block we have right dollar query variable is equal to insert into image table with table column like image name and image description with values like dollar file name variable and blank value after this we have a right dollar statement variable is equal to dollar Connect variable with preparer statement with dollar query variable this statement make query for execution now we want to execute query so we have right dollar statement variable with execute method this method will execute insert query and it will insert data into table so here we have upload multiple files in folder and then after we have insert data into table without submit of form now we have check output in browser friends first we have a refresh browser now we can see file select tag on above table with no data message so now we have select some image from local computer after selecting image now we can see uploading message below file tag after successfully upload image we can see uploaded success message below file tag and here table has been filed with image data like image with name description with edit and delete button now we have again upload same images which we have uploaded earlier so we have select same image and now we can see image has been uploaded but their name has been changed you so this way we can rename image name if already exists in folder now we want to edit image details so for this we have gota index page and here first we want to make modal so for this first we have write division tag with attribute it is equal to image modal and class is equal to modal and fade then after we have write other division tag with class attribute is equal to modal dialogue this class sets the proper width and margin of the modal in this tag we have create one more division tag with class is equal to modal content this class will Stiles border and background color of modal under this tag we have create form method is equal to post and it is equal to edit image form so here we have create form in this form we have write one more division tag between this tag with attribute class is equal to modal header this class is used to define the style of the header of the modal in this division tag we have defined one button for clothes bootstrap modal so for this we have right button type is equal to button class is equal to close and data dismiss is equal to modal with the help of this button we can close bootstrap modal by clicking on this button for display bootstrap modal title we have right heading for tag with class is equal to modal title with text edit image details this class display the title of the bootstrap modal now we have defined one more division tag with attribute class is equal to modal body here modal body class is used to define the style for the body of the modal under this tag we have start defined form field so here we have write input type is equal to text with attribute name and it is equal to image name same way for image description here we have write input type is equal to text with attribute name and it is equal to image description lastly an HTML modal code we have defined division tag with attribute class is equal to modal footer here modal footer class is used to define the style for the footer of the modal under this tag first we have write input type is equal to hidden with attribute name and it is equal to image it under this tag we will store particular image lastly for submit form data we have write input type is equal to submit with attribute name is equal to submit and value is equal to edit by clicking on this button we can submit form data now we have moved to write query code and here we have write dollar document selector with on methods and under this we have right-click event with edit button class edit so when we have click on any particular image edit button then this code will execute under this first we have right image it variable is equal to dollar this with attribute methods and under this we have righted this code will fetch value of it variable and store into this image variable after this we have write Ajax request and under this first we have write URL option set to edit dot PHP here we have send request to this page in second option we have right method and here we have used post method for send data to server in third option we have write a - and here we can define which data we want send to server so here we have write image it variable in fourth option we have right data type option and here we have write some because we want to received data from server in sand format lastly we have write success callback function this function has been called if request completed successfully this function first we want to load image modal so we have right dollar with mode lead image modal with modal methods and under this we have right show after this we want to assign image add value to hidden image at variable so we have right dollar with hidden target images with value methods and under this we have right image it variable below this we have right dollar with textbox at image name with value method and under this we have right dated Optima Jame variable this code will assign value to image name text-box same way we have right dollar with another text box add image description with value method and under this we have right dated Optima description variable this code will assign value to image description text box now we have go to edit dot PHP file and here first we have write include statement with database connection dot PHP file name this code will make database connection on this page after this we have write dollar query variable is equal to select star from image table where image it is equal to dollar post image it variable below it we have write dollar statement variable is equal to dollar connect variable with prepare statement and under this we have write dollar query variable now we want to execute query so we have write dollar statement variable with execute method this method will execute query after this we have right dollar result variable is equal to dollar statement variable with fetch all method this method will fetch a result from query execution for fetch data from dollar result variable we have write for each loop and under this we have write dollar result variable as dollar roll variable under this loop we have right dollar file array variable is equal to explode function with two arguments like dot and dollar bro image name variable this code will make her a from dollar image named variable after this we have a right dollar output image name variable is equal to dollar file array with zero index here we have get image name without extension which we have store in two dollar output image name variable same way we have write dollar output image description variable is equal to dollar bro image description variable so this way we have store particular image data in dollar output array variable now we won't send this data to Ajax request Inge some format so we have right echo statement which is an encode function with dollar output variable this function will convert PHP array to some string and send to Ajax request now check output in browser friends first we have refreshed browser now we have click on first image edit button after clicking on edit button modal has pop up with filled form data below we can see edit button by clicking on this button we can edit form data for this first we have to go to her index dot PHP page here we have right dollar with four minute image form with our method and under this we have right submit event and function with event argument so form has been submitted this code will execute under this first we have right events dot preventdefault method this method will stop to submit form data to server after this we have right if statement and under condition we have right dollar with text box it image name with value method is equal to blank this condition will check textbox has no value then it will execute if block code and under this we have write alert with message like enter image name but suppose the image name textbox has some value then it will execute else block of code and under this we have start right Ajax request and under this first we have write URL option set to update dot PHP here we have send request to this URL in second option we have right method and here we have used post method for send data to server in third option we have write a to and here we can define which data we want send to server so here we have write dollar with image add edit image form with serialized method this method convert into form data to URL encode its string lastly we have write success callback function this function has been called if request completed successfully under this block we have right dollar with modal it image modal with modal methods and under this we have right hide this code will hide image modal after this we want to display updated image day 2 on webpage so we have called load image data function this function will display updated image day 2 on webpage lastly we have write alert statement with message like image details updated this message will pop up after successfully a day to edited now we have go to update dot PHP page and on this page first we have write include statement with database connection dot PHP file name this code will make database connection on this page after this we have write is set function with dollar post limited variable if this variable value is set then it will execute if block of code now we want to get old name of image for verify that this name is same or different if same then we have do not want to change an image name and folder and if this form image name is different then we want to change image and folder also for this here we have make get old image name function with two arguments like dollar connect variable and dollar a variable under this function we have right dollar query variable is equal to select image name from image table where image it is equal to dollar image at variable below this query we have right dollar statement variable is equal to dollar Connect variable with preparer statement and under this we have right dollar query variable for execute query we have right dollar statement variable with execute method this method will execute query after this we have right dollar result variable is equal to dollar statement variable with fetch all method this method will fetch query execution result in store into dollar result variable now we have right for each loop and under this we have right dollar result variable as dollar owe variable by using this loop we can access state to of dollar result variable under this loop we have right returns statement with dollar owe image name variable so this function will return particular image name based on value of image it now here we have right dollar old name variable is equal to get old image name function with two arguments like dollar connect variable and dollar post image at variable this function will return image name below this we have right dollar file array variable is equal to explode function with two arguments like dot and dollar rolled name variable this function will array from dollar old name variable after this we have write file extension variable is equal to end function with dollar file array variable this function will return lust array index value which will be extension of file below this we have right dollar new name variable is equal to dollar post image name variable dot dollar file extension variable here we have make new name for image now we have write if statement and under condition we have write dollar old name variable value is not equal to dollar new name variable if this condition true that means we have changed image name and it will execute if block of code under this block we have right dollar old path variable is equal to files folder slash dollar royal name variable here we have defined image path with old image name same way we have write da Lemieux path variable is equal to files folder slash dollar new name variable here we have define image with new image name this both for renamed image name in server now we have right if statement and under condition we have right rename function with two parameter like dollar rolled path variable and dollar new path variable this condition will check if this rename function successfully rename image name with new updated image name then it will execute if block of code under this block we have right dollar query variable is equal to update image table set image name is equal to dollar new name and image image description is equal to dollar post image description variable where image it is equal to dollar post image add variable this update query will update two column data like image name and image description based on value of dollar post image it variable but supposed dollar rolled name variable value and dollar new name variable value is same then it will execute else block of code [Music] under this block we have right dollar query variable is equal to update image table set image description is equal to dollar post image description variable where image it is equal to dollar post image it variable this update query will only update one table column like image description data based on value of dollar post image it variable so here we have make to update query now here we have write dollar statement variable is equal to dollar connect variable with prepare statement with dollar query variable this will make query for execution below this we have right dollar statement variable with execute method this method will execute update query so here our update image data code is ready now check output in browser friends first we have a refresh web page and now we have click on first image edit button and after clicking on button modal has pop up with filled form data now we want change image name so here we have change image and also add image description value and click on edit button after click on edit button we have received image data edited and after this in table we can see updated image data in table here we can see change image name in table column with image description now we have open image in new tab so here also we can see image name and files folder also change so this way we can change image name with changed name in folder also now we have moved to write code for delete so here on index dot PHP page we have write dollar document selector with our method with click event and delete button class delete so when we have click on delete button this code will execute under this we have right image of variable is equal to dollar this with attribute methods and under this we have righted this code will fetch it attribute value and store in to image variables below this we have right image name variable is equal to dollar this with gay to method and under this we have right image name this code will fetch value of data image name variable and store into image name variable now we have write if statement and under condition we have write confirms statement with message like how you sure want to remove it this code will pop up message box with this message with 2 ok and cancel button we have click on cancel button then not action will be taken and if we have click on OK then it will execute if block of code suppose we have click on OK button then it will execute if block of code and under this we have write Ajax request with first option URL set to delete dot PHP here we have send request to this URL in second option we have right method and here we have write post that means we have used post method for send data to server in third option we have right day to and in this option we can define which data we want send to server so here we have write image it variable and image name variable so this data we have sent to server lastly we have write success callback function this function has been called if request completed successfully under this function we have called load image data method this method will load updated image data on webpage in table format right alert statement with message like image removed so this message will be pop-up after successfully remove of data now we have go to delete dot PHP file and here first we have write include statement with database connection dot PHP file this code will make database connection on this page after this we have write if statement and under condition we have write is set function with dollar post images variable this condition will check if this variable value is set then it will execute if block of code under this block we have write dollar file path variable is equal to files folder name slash dollar post image name variable here we have defined image path below this we have right if statement and under condition we have right on link function with dollar file path variable this condition will check if this function successfully remove particular file then it will execute if block of code after successfully removed of file it will execute if block and under this we have right dollar query variable is equal to delete from a major table where image it is equal to dollar post image it variable below this we have a right dollar statement variable is equal to dollar Connect variable with preparer statement with dollar query variable this method will make query for execution now we want to execute query so we have right dollar statement variable with execute method this method will execute elite query and it will remove data from table now we have check output in browser friends first we have a refresh page and now we have click on delete button so we have click on delete button after clicking of delete button one message has pop up with OK and cancel button so we have click on cancel button after click on cancel button no action has been taken so we have again click on cancel button and now we have click on OK button after click on OK button we have received image removed popup message in web page and in table de 2 also first image data has been removed and that image also removed from files folder also so this way we can remove image from folder and from database also so in this tutorial we have first splode image data from my SQL table with edit and delete button then after we have learned how to up multiple images without submit form and without refresh of webpage at the time of image upload we also renamed same image name also then after we have seen how can we edit single image data by using bootstrap modal with Ajax PHP and MySQL without refresh of webpage you and lastly we have we have discussed how to delete single image from folder and from MySQL table also without by using Ajax with PHP without refresh of webpage by this all feature we have make simple image gallery management system by using using PHP with Ajax if you have any query regarding this video tutorial part please comment your query in comment box and if you liked this video tutorial please share with your friends or even you can also share on social media also if you want to get more update regarding our video tutorial please subscribe our YouTube channel forget more update regarding release of future video lastly keep watching our YouTube channel thanks for watching this video tutorial

Channel: Webslesson

Views: 51,874

Keywords: upload multiple image in php using ajax, image crud php ajax, insert update delete image in php, how to edit multiple image upload in php, php image insert update delete, php mysql image gallery script, rename file in php, unlink in php, php image gallery tutorial mysql, multiple image upload in php mysql, dynamic image gallery in php mysql, update image in php code, add edit delete image in php mysql, crud with image upload in php

Id: CjJh2Qen_Xg

Length: 48min 53sec (2933 seconds)

Published: Fri Feb 16 2018