🥳How to Upload File using Ajax Phần 2 (ok)

https://makitweb.com/how-to-upload-a-file-using-jquery-ajax-in-laravel-8/

Không dùng Database, không dùng form 😂

C:\xampp8\htdocs\datvietcoconut\routes\web.php

<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
use App\Http\Controllers\PageController;
Route::get('/', [PageController::class, 'index']);
Route::post('/uploadFile', [PageController::class, 'uploadFile'])->name('uploadFile');

C:\xampp8\htdocs\datvietcoconut\app\Http\Controllers\PageController.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;
class PageController extends Controller
{
  public function index()
  {
    return view('index');
  }
  public function uploadFile(Request $request)
  {
    $data = [];
    $validator = Validator::make($request->all(), [
      'file' => 'required|mimes:png,jpg,jpeg,csv,txt,pdf|max:2048',
    ]);
    if ($validator->fails()) {
      $data['success'] = 0;
      $data['error'] = $validator->errors()->first('file'); // Error response
    } else {
      if ($request->file('file')) {
        $file = $request->file('file');
        $filename = time() . '_' . $file->getClientOriginalName();
        // File extension
        $extension = $file->getClientOriginalExtension();
        // File upload location
        $location = 'files';
        // Upload file
        $file->move($location, $filename);
        // File path
        $filepath = url('files/' . $filename);
        // Response
        $data['success'] = 1;
        $data['message'] = 'Uploaded Successfully!';
        $data['filepath'] = $filepath;
        $data['extension'] = $extension;
      } else {
        // Response
        $data['success'] = 2;
        $data['message'] = 'File not uploaded.';
      }
    }
    return response()->json($data);
  }
}

C:\xampp8\htdocs\datvietcoconut\resources\views\index.blade.php

<!DOCTYPE html>
<html>
<head>
  <title>How to upload a file using jQuery AJAX in Laravel 8</title>
  <!-- Meta -->
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style type="text/css">
    .displaynone {
      display: none;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">
        <!-- Response message -->
        <div class="alert displaynone" id="responseMsg"></div>
        <!-- File preview -->
        <div id="filepreview" class="displaynone">
          <img src="" class="displaynone" with="200px" height="200px"><br>
          <a href="#" class="displaynone">Click Here..</a>
        </div>
        <!-- Form -->
        <div class="form-group">
          <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">File <span class="required">*</span></label>
          <div class="col-md-6 col-sm-6 col-xs-12">
            <input type='file' id="file" name='file' class="form-control">
            <!-- Error -->
            <div class='alert alert-danger mt-2 d-none text-danger' id="err_file"></div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-md-6">
            <input type="button" id="submit" value='Submit' class='btn btn-success'>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Script -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script type="text/javascript">
    var CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
    $(document).ready(function() {
      $('#submit').click(function() {
        // Get the selected file
        var files = $('#file')[0].files;
        if (files.length > 0) {
          var fd = new FormData();
          // Append data
          fd.append('file', files[0]);
          fd.append('_token', CSRF_TOKEN);
          // Hide alert
          $('#responseMsg').hide();
          // AJAX request
          $.ajax({
            url: "{{route('uploadFile')}}"
            , method: 'post'
            , data: fd
            , contentType: false
            , processData: false
            , dataType: 'json'
            , success: function(response) {
              // Hide error container
              $('#err_file').removeClass('d-block');
              $('#err_file').addClass('d-none');
              if (response.success == 1) { // Uploaded successfully
                // Response message
                $('#responseMsg').removeClass("alert-danger");
                $('#responseMsg').addClass("alert-success");
                $('#responseMsg').html(response.message);
                $('#responseMsg').show();
                // File preview
                $('#filepreview').show();
                $('#filepreview img,#filepreview a').hide();
                if (response.extension == 'jpg' || response.extension == 'jpeg' || response.extension == 'png') {
                  $('#filepreview img').attr('src', response.filepath);
                  $('#filepreview img').show();
                } else {
                  $('#filepreview a').attr('href', response.filepath).show();
                  $('#filepreview a').show();
                }
              } else if (response.success == 2) { // File not uploaded
                // Response message
                $('#responseMsg').removeClass("alert-success");
                $('#responseMsg').addClass("alert-danger");
                $('#responseMsg').html(response.message);
                $('#responseMsg').show();
              } else {
                // Display Error
                $('#err_file').text(response.error);
                $('#err_file').removeClass('d-none');
                $('#err_file').addClass('d-block');
              }
            }
            , error: function(response) {
              console.log("error : " + JSON.stringify(response));
            }
          });
        } else {
          alert("Please select a file.");
        }
      });
    });
  </script>
</body>
</html>

Hoặc thay đổi

<input type="button" id="submit" value='Submit' class='btn btn-success'> 
thành 
<div id="submit" class='btn btn-success'>Submit</div>

<!DOCTYPE html>
<html>
<head>
  <title>How to upload a file using jQuery AJAX in Laravel 8</title>
  <!-- Meta -->
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style type="text/css">
    .displaynone {
      display: none;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">
        <!-- Response message -->
        <div class="alert displaynone" id="responseMsg"></div>
        <!-- File preview -->
        <div id="filepreview" class="displaynone">
          <img src="" class="displaynone" with="200px" height="200px"><br>
          <a href="#" class="displaynone">Click Here..</a>
        </div>
        <!-- Form -->
        <div class="form-group">
          <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">File <span class="required">*</span></label>
          <div class="col-md-6 col-sm-6 col-xs-12">
            <input type='file' id="file" name='file' class="form-control">
            <!-- Error -->
            <div class='alert alert-danger mt-2 d-none text-danger' id="err_file"></div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-md-6">
            <div id="submit" class='btn btn-success'>Submit</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Script -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script type="text/javascript">
    var CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
    $(document).ready(function() {
      $('#submit').click(function() {
        // Get the selected file
        var files = $('#file')[0].files;
        if (files.length > 0) {
          var fd = new FormData();
          // Append data
          fd.append('file', files[0]);
          fd.append('_token', CSRF_TOKEN);
          // Hide alert
          $('#responseMsg').hide();
          // AJAX request
          $.ajax({
            url: "{{route('uploadFile')}}"
            , method: 'post'
            , data: fd
            , contentType: false
            , processData: false
            , dataType: 'json'
            , success: function(response) {
              // Hide error container
              $('#err_file').removeClass('d-block');
              $('#err_file').addClass('d-none');
              if (response.success == 1) { // Uploaded successfully
                // Response message
                $('#responseMsg').removeClass("alert-danger");
                $('#responseMsg').addClass("alert-success");
                $('#responseMsg').html(response.message);
                $('#responseMsg').show();
                // File preview
                $('#filepreview').show();
                $('#filepreview img,#filepreview a').hide();
                if (response.extension == 'jpg' || response.extension == 'jpeg' || response.extension == 'png') {
                  $('#filepreview img').attr('src', response.filepath);
                  $('#filepreview img').show();
                } else {
                  $('#filepreview a').attr('href', response.filepath).show();
                  $('#filepreview a').show();
                }
              } else if (response.success == 2) { // File not uploaded
                // Response message
                $('#responseMsg').removeClass("alert-success");
                $('#responseMsg').addClass("alert-danger");
                $('#responseMsg').html(response.message);
                $('#responseMsg').show();
              } else {
                // Display Error
                $('#err_file').text(response.error);
                $('#err_file').removeClass('d-none');
                $('#err_file').addClass('d-block');
              }
            }
            , error: function(response) {
              console.log("error : " + JSON.stringify(response));
            }
          });
        } else {
          alert("Please select a file.");
        }
      });
    });
  </script>
</body>
</html>

PreviousHow to Upload File using Ajax Phần 1 (ok)NextHow to Upload File using Ajax Phần 3 (use change) (ok)

Last updated 2 years ago

Was this helpful?

<!DOCTYPE html> <html> <head> <title>How to upload a file using jQuery AJAX in Laravel 8</title>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="csrf-token" content="{{ csrf_token() }}"> <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <style type="text/css"> .displaynone { display: none; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12">  <div class="alert displaynone" id="responseMsg"></div>  <div id="filepreview" class="displaynone"> <img src="" class="displaynone" with="200px" height="200px"><br> <a href="#" class="displaynone">Click Here..</a> </div>  <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">File <span class="required">*</span></label> <div class="col-md-6 col-sm-6 col-xs-12"> <input type='file' id="file" name='file' class="form-control">  <div class='alert alert-danger mt-2 d-none text-danger' id="err_file"></div> </div> </div> <div class="form-group"> <div class="col-md-6"> <input type="button" id="submit" value='Submit' class='btn btn-success'> </div> </div> </div> </div> </div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript"> var CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]').getAttribute("content"); $(document).ready(function() { $('#submit').click(function() { // Get the selected file var files = $('#file')[0].files; if (files.length > 0) { var fd = new FormData(); // Append data fd.append('file', files[0]); fd.append('_token', CSRF_TOKEN); // Hide alert $('#responseMsg').hide(); // AJAX request $.ajax({ url: "{{route('uploadFile')}}" , method: 'post' , data: fd , contentType: false , processData: false , dataType: 'json' , success: function(response) { // Hide error container $('#err_file').removeClass('d-block'); $('#err_file').addClass('d-none'); if (response.success == 1) { // Uploaded successfully // Response message $('#responseMsg').removeClass("alert-danger"); $('#responseMsg').addClass("alert-success"); $('#responseMsg').html(response.message); $('#responseMsg').show(); // File preview $('#filepreview').show(); $('#filepreview img,#filepreview a').hide(); if (response.extension == 'jpg' || response.extension == 'jpeg' || response.extension == 'png') { $('#filepreview img').attr('src', response.filepath); $('#filepreview img').show(); } else { $('#filepreview a').attr('href', response.filepath).show(); $('#filepreview a').show(); } } else if (response.success == 2) { // File not uploaded // Response message $('#responseMsg').removeClass("alert-success"); $('#responseMsg').addClass("alert-danger"); $('#responseMsg').html(response.message); $('#responseMsg').show(); } else { // Display Error $('#err_file').text(response.error); $('#err_file').removeClass('d-none'); $('#err_file').addClass('d-block'); } } , error: function(response) { console.log("error : " + JSON.stringify(response)); } }); } else { alert("Please select a file."); } }); }); </script> </body> </html>

<!DOCTYPE html> <html> <head> <title>How to upload a file using jQuery AJAX in Laravel 8</title>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="csrf-token" content="{{ csrf_token() }}"> <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <style type="text/css"> .displaynone { display: none; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12">  <div class="alert displaynone" id="responseMsg"></div>  <div id="filepreview" class="displaynone"> <img src="" class="displaynone" with="200px" height="200px"><br> <a href="#" class="displaynone">Click Here..</a> </div>  <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">File <span class="required">*</span></label> <div class="col-md-6 col-sm-6 col-xs-12"> <input type='file' id="file" name='file' class="form-control">  <div class='alert alert-danger mt-2 d-none text-danger' id="err_file"></div> </div> </div> <div class="form-group"> <div class="col-md-6"> <div id="submit" class='btn btn-success'>Submit</div> </div> </div> </div> </div> </div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript"> var CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]').getAttribute("content"); $(document).ready(function() { $('#submit').click(function() { // Get the selected file var files = $('#file')[0].files; if (files.length > 0) { var fd = new FormData(); // Append data fd.append('file', files[0]); fd.append('_token', CSRF_TOKEN); // Hide alert $('#responseMsg').hide(); // AJAX request $.ajax({ url: "{{route('uploadFile')}}" , method: 'post' , data: fd , contentType: false , processData: false , dataType: 'json' , success: function(response) { // Hide error container $('#err_file').removeClass('d-block'); $('#err_file').addClass('d-none'); if (response.success == 1) { // Uploaded successfully // Response message $('#responseMsg').removeClass("alert-danger"); $('#responseMsg').addClass("alert-success"); $('#responseMsg').html(response.message); $('#responseMsg').show(); // File preview $('#filepreview').show(); $('#filepreview img,#filepreview a').hide(); if (response.extension == 'jpg' || response.extension == 'jpeg' || response.extension == 'png') { $('#filepreview img').attr('src', response.filepath); $('#filepreview img').show(); } else { $('#filepreview a').attr('href', response.filepath).show(); $('#filepreview a').show(); } } else if (response.success == 2) { // File not uploaded // Response message $('#responseMsg').removeClass("alert-success"); $('#responseMsg').addClass("alert-danger"); $('#responseMsg').html(response.message); $('#responseMsg').show(); } else { // Display Error $('#err_file').text(response.error); $('#err_file').removeClass('d-none'); $('#err_file').addClass('d-block'); } } , error: function(response) { console.log("error : " + JSON.stringify(response)); } }); } else { alert("Please select a file."); } }); }); </script> </body> </html>