Jquery Progress Bar With Sql Data Upload
Function 1 - Upload CSV File using Ajax with PHP
Part 2 - Get-go Import CSV file information using Ajax
Role iii - Start Import CSV file data using Ajax
This is another mail service on display PHP script process on progress bar using Ajax with jQuery. Hither In this post we will show CSV file data import procedure on progress bar by using Ajax jquery with PHP script. Or in short Display CSV import process using Ajax progress bar.
Now you lot accept one question ascend in your heed why we want to brandish import process of CSV file data on progress bar. This is one very useful feature for impove your UI, because if at that place is big data in your CSV file for import into Mysql data, then at that time your PHP script will display time out error on web folio. And it volition very difficult import big amount of CSV file data into Mysql database.
For solve this problem, hither we have brand one php script, which will solve the trouble of PHP timeout mistake at the fourth dimension important of big CSV file. Because hither nosotros will import CSV file data into Mysql tabular array in step by step and display how many data are process for import we volition display on progress bar using Ajax with jQuery. So, if User has import CSV file, and so he can view CSV file data importing process on web page in the form of progress bar. This all process will be done without refresh of web folio, because hither nosotros accept use Ajax technology with jQuery. Here we have utilise Bootstrap library for make progress bar.
There are many tutorials are available online for display file upload procress on progress bar in php script using Ajax, but there is no whatsoever postal service notice on How to show CSV file information import procedure on progress bar using Ajax jQuery in PHP script. And then, nosotros have publish this tutorial, in which we take covered how to display real fourth dimension mysql data import process on progress bar using Ajax with PHP. For make existent time progress bar in PHP using Ajax, nosotros have divided this tutorial into following office.
- Upload CSV File using Ajax with PHP
- Kickoff Import CSV file data using Ajax
- Display Import CSV File Data on progress bar using Ajax
Upload CSV File using Ajax with PHP
Here we volition beginning upload CSV file on server by using PHP with Ajax. We can also direct fetch information from CSV file without uploading also, but here we want to display existent time import process on progress bar, so we will offset upload CSV file on server past using Ajax. Source lawmaking of uploading of CSV file using Ajax with PHP script you can find below.
index.php
<!DOCTYPE html> <html> <head> <title>Import CSV File Data with Progress Bar in PHP using Ajax</championship> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.three.six/css/bootstrap.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/three.3.7/js/bootstrap.min.js"></script> </caput> <body> <br /> <br /> <div class="container"> <h1 align="center">Import CSV File Data with Progress Bar in PHP using Ajax - 3</h1> <br /> <div course="panel panel-default"> <div grade="console-heading"> <h3 form="panel-title">Import CSV File Data</h3> </div> <div course="panel-torso"> <span id="message"></span> <form id="sample_form" method="POST" enctype="multipart/class-data" class="form-horizontal"> <div form="class-grouping"> <characterization course="col-md-four command-characterization">Select CSV File</label> <input type="file" name="file" id="file" /> </div> <div grade="form-group" align="eye"> <input type="subconscious" proper name="hidden_field" value="one" /> <input type="submit" proper name="import" id="import" class="btn btn-info" value="Import" /> </div> </form> <div course="form-group" id="process" manner="display:none;"> <div class="progress"> <div class="progress-bar progress-bar-striped agile" role="progressbar" aria-valuemin="0" aria-valuemax="100"> <span id="process_data">0</span> - <span id="total_data">0</span> </div> </div> </div> </div> </div> </div> </body> </html> <script> $(document).set(office(){ var clear_timer; $('#sample_form').on('submit', office(consequence){ $('#bulletin').html(''); event.preventDefault(); $.ajax({ url:"upload.php", method:"Mail service", data: new FormData(this), dataType:"json", contentType:simulated, cache:imitation, processData:false, beforeSend:function(){ $('#import').attr('disabled','disabled'); $('#import').val('Importing'); }, success:office(data) { if(data.success) { $('#total_data').text(information.total_line); $('#message').html('<div class="warning alert-success">CSV File Uploaded</div>'); } if(information.fault) { $('#bulletin').html('<div grade="alert alert-danger">'+data.fault+'</div>'); $('#import').attr('disabled',false); $('#import').val('Import'); } } }) }); }); </script> upload.php
<?php //upload.php if(isset($_POST['hidden_field'])) { $fault = ''; $total_line = ''; session_start(); if($_FILES['file']['name'] != '') { $allowed_extension = assortment('csv'); $file_array = explode(".", $_FILES["file"]["name"]); $extension = stop($file_array); if(in_array($extension, $allowed_extension)) { $new_file_name = rand() . '.' . $extension; $_SESSION['csv_file_name'] = $new_file_name; move_uploaded_file($_FILES['file']['tmp_name'], 'file/'.$new_file_name); $file_content = file('file/'. $new_file_name, FILE_SKIP_EMPTY_LINES); $total_line = count($file_content); } else { $error = 'Only CSV file format is allowed'; } } else { $error = 'Please Select File'; } if($error != '') { $output = assortment( 'error' => $mistake ); } else { $output = assortment( 'success' => true, 'total_line' => ($total_line - ane) ); } echo json_encode($output); } ?> Beginning Import CSV file data using Ajax
Once CSV file has been shop into binder, then after we want to start import CSV data into Mysql database. For start import csv file data, here we take utilise Ajax asking, which will be triggered afterward successfully upload CSV file, and it will send Ajax request to PHP script for read data from CSV file and start importing into Mysql table.
index.php
<!DOCTYPE html> <html> <head> <title>Import CSV File Data with Progress Bar in PHP using Ajax</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.i.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/iii.3.6/css/bootstrap.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </caput> <body> <br /> <br /> <div class="container"> <h1 marshal="centre">Import CSV File Data with Progress Bar in PHP using Ajax - 3</h1> <br /> <div class="console panel-default"> <div class="panel-heading"> <h3 class="panel-title">Import CSV File Data</h3> </div> <div grade="panel-trunk"> <span id="message"></span> <form id="sample_form" method="Postal service" enctype="multipart/class-data" class="course-horizontal"> <div class="form-grouping"> <label class="col-md-four command-label">Select CSV File</characterization> <input type="file" proper noun="file" id="file" /> </div> <div class="class-group" marshal="center"> <input blazon="hidden" name="hidden_field" value="1" /> <input type="submit" proper noun="import" id="import" class="btn btn-info" value="Import" /> </div> </form> <div class="class-grouping" id="process" fashion="display:none;"> <div class="progress"> <div class="progress-bar progress-bar-striped active" part="progressbar" aria-valuemin="0" aria-valuemax="100"> <bridge id="process_data">0</span> - <span id="total_data">0</span> </div> </div> </div> </div> </div> </div> </torso> </html> <script> $(document).ready(function(){ var clear_timer; $('#sample_form').on('submit', function(event){ $('#message').html(''); event.preventDefault(); $.ajax({ url:"upload.php", method:"Postal service", data: new FormData(this), dataType:"json", contentType:false, enshroud:false, processData:simulated, beforeSend:function(){ $('#import').attr('disabled','disabled'); $('#import').val('Importing'); }, success:function(data) { if(data.success) { $('#total_data').text(data.total_line); start_import(); //$('#message').html('<div course="warning alert-success">CSV File Uploaded</div>'); } if(data.fault) { $('#bulletin').html('<div class="alarm warning-danger">'+information.mistake+'</div>'); $('#import').attr('disabled',false); $('#import').val('Import'); } } }) }); function start_import() { $('#process').css('display', 'block'); $.ajax({ url:"import.php", success:function() { } }) } }); </script> import.php
<?php //import.php header('Content-type: text/html; charset=utf-eight'); header("Enshroud-Control: no-cache, must-revalidate"); header ("Pragma: no-cache"); set_time_limit(0); ob_implicit_flush(ane); session_start(); if(isset($_SESSION['csv_file_name'])) { $connect = new PDO("mysql:host=localhost; dbname=testing", "root", ""); $file_data = fopen('file/' . $_SESSION['csv_file_name'], 'r'); fgetcsv($file_data); while($row = fgetcsv($file_data)) { $data = array( ':first_name' => $row[0], ':last_name' => $row[1] ); $query = " INSERT INTO tbl_sample (first_name, last_name) VALUES (:first_name, :last_name) "; $statement = $connect->prepare($query); $statement->execute($information); sleep(i); if(ob_get_level() > 0) { ob_end_flush(); } } unset($_SESSION['csv_file_name']); } ?> Display Import CSV File Data on progress bar using Ajax
One time CSV file is uploaded and first importing data from CSV file to Mysql Database, now in your heed question will arise how to display CSV data importing procedure on progress bar. For this as well, we will ship continously ship Ajax asking for fetech how many number of data are processed based on that number progress bar will display information import process. It will continously send asking for fetch number of data are process until all information are imported into mysql table. For this hither we take utilize jQuery setInterval() and clearInterval() callback role has been used.
alphabetize.php
<!DOCTYPE html> <html> <head> <title>Import CSV File Information with Progress Bar in PHP using Ajax</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/iii.1.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.three.7/js/bootstrap.min.js"></script> </head> <trunk> <br /> <br /> <div class="container"> <h1 align="eye">Import CSV File Data with Progress Bar in PHP using Ajax - 3</h1> <br /> <div form="panel panel-default"> <div class="panel-heading"> <h3 grade="panel-title">Import CSV File Data</h3> </div> <div grade="console-body"> <span id="message"></span> <course id="sample_form" method="Postal service" enctype="multipart/form-information" class="form-horizontal"> <div course="form-group"> <label class="col-doc-4 control-characterization">Select CSV File</label> <input blazon="file" name="file" id="file" /> </div> <div form="form-group" marshal="center"> <input type="hidden" name="hidden_field" value="1" /> <input type="submit" name="import" id="import" grade="btn btn-info" value="Import" /> </div> </form> <div class="class-group" id="process" style="display:none;"> <div grade="progress"> <div class="progress-bar progress-bar-striped agile" role="progressbar" aria-valuemin="0" aria-valuemax="100"> <bridge id="process_data">0</bridge> - <bridge id="total_data">0</bridge> </div> </div> </div> </div> </div> </div> </trunk> </html> <script> $(document).set up(function(){ var clear_timer; $('#sample_form').on('submit', function(event){ $('#message').html(''); effect.preventDefault(); $.ajax({ url:"upload.php", method:"Postal service", data: new FormData(this), dataType:"json", contentType:false, cache:false, processData:false, beforeSend:function(){ $('#import').attr('disabled','disabled'); $('#import').val('Importing'); }, success:office(data) { if(data.success) { $('#total_data').text(data.total_line); start_import(); clear_timer = setInterval(get_import_data, 2000); //$('#bulletin').html('<div form="alert warning-success">CSV File Uploaded</div>'); } if(information.error) { $('#message').html('<div class="alert alarm-danger">'+data.error+'</div>'); $('#import').attr('disabled',simulated); $('#import').val('Import'); } } }) }); function start_import() { $('#procedure').css('brandish', 'block'); $.ajax({ url:"import.php", success:role() { } }) } office get_import_data() { $.ajax({ url:"process.php", success:part(data) { var total_data = $('#total_data').text(); var width = Math.round((information/total_data)*100); $('#process_data').text(data); $('.progress-bar').css('width', width + '%'); if(width >= 100) { clearInterval(clear_timer); $('#process').css('display', 'none'); $('#file').val(''); $('#message').html('<div form="alert alert-success">Data Successfully Imported</div>'); $('#import').attr('disabled',false); $('#import').val('Import'); } } }) } }); </script> process.php
<?php //process.php $connect = new PDO("mysql:host=localhost; dbname=testing", "root", ""); $query = "SELECT * FROM tbl_sample"; $argument = $connect->prepare($query); $statement->execute(); repeat $statement->rowCount(); ?> This tutorial is make for learning purpose, yous have brand required changes equally per your requirement. Above yous have complete step by step process for CSV file data importing procedure on progress bar using PHP script with Ajax jQuery Bootstrap and Mysql database. If you desire to get complete source code of this PHP Ajax jQuery tutorial, you can download source code in zip file past click on below link.
Source: https://www.webslesson.info/2019/11/csv-import-using-ajax-progress-bar-in-php.html
Belum ada Komentar untuk "Jquery Progress Bar With Sql Data Upload"
Posting Komentar