REGISTRATION [ CANCLE CHOOSE IMAGE WITHOUT PAGE REFRESH ]
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="Sufee Admin - HTML5 Admin Template">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="{{ asset('apple-icon.png') }}">
<link rel="shortcut icon" href="{{ asset('favicon.ico') }}">
<link rel="stylesheet" href="{{ asset('vendors/bootstrap/dist/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('vendors/font-awesome/css/font-awesome.min.css') }}">
<link rel="stylesheet" href="{{ asset('vendors/themify-icons/css/themify-icons.css') }}">
<link rel="stylesheet" href="{{ asset('vendors/flag-icon-css/css/flag-icon.min.css') }}">
<link rel="stylesheet" href="{{ asset('vendors/selectFX/css/cs-skin-elastic.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800' rel='stylesheet' type='text/css'>
</head>
<body class="bg-dark">
<div class="sufee-login d-flex align-content-center flex-wrap">
<div class="container">
<div class="login-content">
@if (session()->has('message'))
<div class="alert alert-success">
<center>
{{ session()->get('message') }}
</center>
</div>
@endif
<div class="login-form">
<form action="{{ route('registerStore') }}" method="POST" class="user"
enctype="multipart/form-data">
@csrf
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<label>Email</label>
<input type="text" name="email" class="form-control" placeholder="User Name">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="passwords" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="number" name="phone" class="form-control" placeholder="Phone Number">
</div>
<div class="form-group row holder">
<figure class="showBanner demo-live">
<button type="button" onclick="removeImage()" id="xButton">x</button>
<img id="blah" src="admin/images/profile/no_image.jpg" alt="no image"
style="height: 70px; width: 100px" />
</figure>
</div>
<input type="file" name="imagez" class="form-group" id="imgInp" required="true"
onclick="showButton()">
<script>
imgInp.onchange = evt => {
const [file] = imgInp.files
// console.log(file);
if (file) {
blah.src = URL.createObjectURL(file)
}
}
function removeImage() {
blah.src = "admin/images/profile/no_image.jpg";
imgInp.value = "";
document.getElementById('xButton').style.display = 'none';
}
</script>
<script>
function showButton() {
document.getElementById('xButton').style.display = 'block';
}
document.getElementById('xButton').addEventListener("click", function() {
document.getElementById('banner').style.display = 'none';
document.getElementById('xButton').style.display = 'none';
});
</script>
<style>
.holder {
height: 110px;
width: 110px;
}
img {
max-width: 111px;
max-height: 111px;
min-width: 111px;
min-height: 111px;
}
input[type="file"] {
margin-top: 5px;
}
.heading {
font-family: Montserrat;
font-size: 45px;
color: green;
}
#xButton {
float: right;
display: none;
background-color: whitesmoke;
cursor: pointer;
position: absolute;
font-size: 10px;
right: 2px;
top: 2px;
}
.demo-live {
position: relative;
}
</style>
<button type="submit" class="btn btn-primary btn-flat m-b-30 m-t-30">Register</button>
<div class="register-link m-t-15 text-center">
<p>Already have account ? <a href="login"> Sign in</a></p>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="{{ asset('vendors/jquery/dist/jquery.min.js') }}"></script>
<script src="{{ asset('vendors/popper.js/dist/umd/popper.min.js') }}"></script>
<script src="{{ asset('vendors/bootstrap/dist/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('assets/js/main.js') }}"></script>
</body>
</html>
Comments
Post a Comment