Install Laravel by using below command.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>File upload without Form submit by using jquery</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2"> <div class="panel panel-info"> <div class="panel-heading"> <div class="panel-title">Upload Form</div> </div> <div style="padding-top:30px" class="panel-body"> <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div> <form method="post" enctype="multipart/form-data" id="myform" class="form-horizontal" role="form"> <div style="margin-bottom: 25px" class="input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-user"></i> </span> <input id="email" type="text" class="form-control" name="username" value="" placeholder="username or email"> </div> <div style="margin-bottom: 25px" class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-file"></i></span> <input id="fileImage" name="fileImage" type="file" class="form-control" name="fileImage" placeholder="image"> </div> <div style="margin-top:10px" class="form-group"> <div class="col-sm-12 controls"> <button id="btnUpload" type="button" class="btn btn-success">submit </button> </div> </div> </form> </div> </div> <div id="result"></div> </div> </div> </body> </html>
Create the User component inside the components folder like below path.
<script> $(document).ready(function(e) { $(document).on('click','#btnUpload',function(){ var fd = new FormData(); var files = $('#fileImage')[0].files[0]; var email = $("#email").val(); fd.append('email',email); fd.append('file',files); $.ajax({ url: 'upload.php', type: 'post', data: fd, contentType: false, processData: false, success: function(response){ $("#result").html(response); } }); }); }); </script>