Akan luar biasa jika Anda memiliki file progress bar mengunggah dengan persentase menggunakan jquery form js di aplikasi php laravel. bilah kemajuan sangat membantu untuk menunjukkan kepada klien berapa banyak yang diunggah dilakukan.
Anda selalu melakukan pengunggahan file dengan cara normal dan Anda dapat melakukannya dengan mudah. Tetapi ketika Anda memiliki ukuran file yang besar maka perlu waktu untuk mengunggah di server. Mungkin Anda tidak dapat mengurangi waktu untuk mengunggah file atau gambar, tetapi Anda dapat menampilkan bilah kemajuan dengan persentase, sehingga klien dapat memahami berapa banyak yang tersisa untuk mengunggah file. Jadi, dalam tutorial ini, kita akan membuat unggah file dengan progress bar di laravel.
Saya menulis tutorial langkah demi langkah mengunggah file dengan progress bar menggunakan jquery form js. Jadi, ikuti saja beberapa langkah dan akan mendapatkan tata letak seperti di bawah ini:
Pratinjau:
Langkah 1: Buat Route
Pada langkah pertama, kami akan menambahkan dua route baru. Satu untuk tampilan dan kami akan menulis kode jquery di file tampilan. Pada langkah kedua, kami akan membuat route POST untuk mengunggah file.
routes/web.php
Route::get('file-upload', 'FileController@fileUpload');
Route::post('file-upload', 'FileController@fileUploadPost')->name('fileUploadPost');Langkah 2: Create FileController
Pada langkah kedua, kita perlu membuat controller FileController dengan fileUpload() dan fileUploadPost(). buat saja controller baru dan letakkan kode di bawahnya:
app/Http/Controllers/fileUploadPost.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class FileController extends Controller
{
/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function fileUpload()
{
return view('fileUpload');
}
/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function fileUploadPost(Request $request)
{
$request->validate([
'file' => 'required',
]);
$fileName = time().'.'.request()->file->getClientOriginalExtension();
request()->file->move(public_path('files'), $fileName);
return response()->json(['success'=>'You have successfully upload file.']);
}
}Langkah 3: Create Blade File
Pada langkah terakhir ini, kami perlu membuat file fileUpload.blade.php dan kami menulis kode untuk jquery dan menunjukkan Anda dengan progress bar. Jadi, Anda cukup menambahkan kode di bawah ini di path berikut:
resources/views/ fileUpload.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 5.6 - File upload with progress bar - Medikre.com</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<style>
.progress { position:relative; width:100%; border: 1px solid #7F98B2; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:25px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; color: #7F98B2;}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header">
<h2>Laravel 5.6 - File upload with progress bar - Medikre.com</h2>
</div>
<div class="card-body">
<form method="POST" action="{{ route('fileUploadPost') }}" enctype="multipart/form-data">
@csrf
<div class="form-group">
<input name="file" id="poster" type="file" class="form-control"><br/>
<div class="progress">
<div class="bar"></div >
<div class="percent">0%</div >
</div>
<input type="submit" value="Submit" class="btn btn-success">
</div>
</form>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">
function validate(formData, jqForm, options) {
var form = jqForm[0];
if (!form.file.value) {
alert('File not found');
return false;
}
}
(function() {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$('form').ajaxForm({
beforeSubmit: validate,
beforeSend: function() {
status.empty();
var percentVal = '0%';
var posterValue = $('input[name=file]').fieldValue();
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
success: function() {
var percentVal = 'Wait, Saving';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function(xhr) {
status.html(xhr.responseText);
alert('Uploaded Successfully');
window.location.href = "/file-upload";
}
});
})();
</script>
</body>
</html>Setelah diikuti dengan sukses, Anda harus membuat folder "file" dengan izin penuh, Setelah itu Anda dapat menjalankan dengan cepat dengan mengikuti perintah:
php artisan serveSekarang Anda dapat membuka url di bawah ini di browser Anda:
http://localhost:8000/file-uploadSaya harap ini dapat membantu Anda ...
progress bar file jquery file upload ajax laravel
andriajah