Immediately, I will explain how to make an application to upload these files , the first thing you should do is to design a layout file upload with subsequent bootstrap create a new database in mysql sql server or the like syntax below .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | -- -- Database: `<span id="IL_AD11" class="IL_AD">biodata</span>` -- CREATE TABLE IF NOT EXISTS `upload_data` ( `id_upload` int (5) NOT NULL , `file_name` varchar (200) NOT NULL , `file_size` varchar (200) NOT NULL , `file_type` varchar (200) NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1; ALTER TABLE `upload_data` ADD PRIMARY KEY (`id_upload`); ALTER TABLE `upload_data` MODIFY `id_upload` int (5) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=7; |
To connect then create a new file with the name "config.php".
1 2 3 4 5 6 | <?php $mysqli = new mysqli( "localhost" , "root" , "pidie" , "biodata" ); if ( $mysqli ->connect_errno) { echo "Failed to connect to MySQL: " . $mysqli ->connect_error; } ?> |
Then make the index.php file that contains the design files uploaded using the bootstrap and how to display data and delete files and image files in addition to the right .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "utf-8" > <meta http-equiv= "X-UA-Compatible" content= "IE=edge" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <title>Upload File Images</title> <!-- Bootstrap --> <link href= "css/bootstrap.min.css" rel= "stylesheet" > <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file: // --> <!--[ if lt IE 9]> <![ endif ]--> </head> <body> <p> </p> <div class = "container" > <form action= "upload.php" <span id= "IL_AD6" class = "IL_AD" >method</span>= "POST" enctype= "multipart/form-data" > <div class = "form-group" > <label for = "InputFile" >Upload File</label> <input type= "file" name= "files[]" multiple id= "InputFile" > <p class = "help-block" >Upload Multi File Images</p> </div> <button type= "<span id=" IL_AD7 " class=" IL_AD ">submit</span>" class = "btn btn-primary" >Upload</button> </form> <p> </p> <ul class = "media-list" > <?php include "<span id=" IL_AD10 " class=" IL_AD ">config</span>.php" ; $res = $mysqli ->query( "SELECT * FROM upload_data" ); while ( $row = $res ->fetch_assoc()): ?> <li class = "media" > <a class = "media-left" href= "#" > <img width= "64px" src= "upload/<?php echo $row['file_name'] ?>" alt= "<?php echo $row['file_name'] ?>" > </a> <div class = "media-body" > <h4 class = "media-heading" ><?php echo $row [ 'file_name' ] ?></h4> <?php echo $row [ 'id_upload' ] ?>|<?php echo $row [ 'file_size' ] ?>|<?php echo $row [ 'file_type' ] ?> <a href= "delete.php?id=<?php echo $row['id_upload'] ?>&nm=<?php echo $row['file_name'] ?>" > Delete </a> </div> </li> <?php endwhile ; ?> </ul> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src= "js/jquery.min.js" ></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src= "js/bootstrap.min.js" ></script> </body> </html> |
Next create upload.php file to upload a file along with a new folder called "upload".
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <?php include "config.php" ; if (isset( $_FILES [ 'files' ])){ $errors = array (); foreach ( $_FILES [ 'files' ][ 'tmp_name' ] as $key => $tmp_name ){ $file_name = $key . $_FILES [ 'files' ][ 'name' ][ $key ]; $file_size = $_FILES [ 'files' ][ 'size' ][ $key ]; $file_tmp = $_FILES [ 'files' ][ 'tmp_name' ][ $key ]; $file_type = $_FILES [ 'files' ][ 'type' ][ $key ]; if ( $file_size > 2097152){ $errors []= '<span id="IL_AD2" class="IL_AD">File size</span> must be less than 2 MB' ; } $query = "INSERT into upload_data VALUES('','$file_name','$file_size','$file_type'); " ; $desired_dir = "upload" ; if ( empty ( $errors )==true){ if ( is_dir ( $desired_dir )==false){ mkdir ( "$desired_dir" , 0700); // Create directory if it does not exist } if ( is_dir ( "$desired_dir/" . $file_name )==false){ move_uploaded_file( $file_tmp , "upload/" . $file_name ); } else { //rename <span id="IL_AD5" class="IL_AD">the file</span> if another one exist $new_dir = "upload/" . $file_name .time(); rename( $file_tmp , $new_dir ) ; } $mysqli ->query( $query ); } else { echo $errors ; } } if ( empty ( $error )){ echo "<script>alert('Success');location.href='index.php';</script>" ; } } ?> |
After that create delete.php files to delete data from the database and disk.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <?php include "config.php" ; if (isset( $_GET [ 'id' ])): $hap = unlink( 'upload/' . $_GET [ 'nm' ]); if ( $hap ){ $stmt = $mysqli ->prepare( "DELETE FROM upload_data WHERE id_upload=?" ); $stmt ->bind_param( 's' , $id ); $id = $_GET [ 'id' ]; if ( $stmt ->execute()): echo "<script>location.href='index.php'</script>" ; else : echo "<script>alert('" . $stmt ->error. "')</script>" ; endif ; } else { echo "<script>alert('No Delete File From Harddisk')</script>" ; echo "<script>location.href='index.php'</script>" ; } endif ; ?> |
'BootStrap > Bootstrap Sample File' 카테고리의 다른 글
CRUD (CREATE, READ, UPDATE, DELETE, PAGINATION) USING PHP PDO AND BOOTSTRAP (0) | 2015.11.15 |
---|---|
LOGIN SESSIONS USING PHP PDO AND BOOTSTRAP (0) | 2015.11.15 |
HOW TO CREATE A LOGIN SESSION USING PHP MYSQLI AND BOOTSTRAP (0) | 2015.11.15 |
HOW TO MAKE CRUD OPERATIONS BY USING PHP MYSQLI AND BOOTSTRAP (0) | 2015.11.15 |
HOW TO LOGIN MULTI-LEVEL USER USING PHP MYSQLI AND BOOTSTRAP (0) | 2015.11.15 |