repl.it
@badvillain01/

image preview

HTML, CSS, JS

view input file image before upload

fork
loading
Files
  • index.html
  • script.js
  • style.css
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>webp | TheVillainer</title>
    <meta name="keywords" content="Image, ImageHost, Thevillainer, Badvillain, webp", "webp image hosting">
    <meta name="description" content="Free webp image hosting site">
    <meta name="author" content="Badvillain01">
    <meta name="application-name" content="webp">



    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>


    <div class="container text-center">


      <div class="container mt-4 mb-3">
        <h3 class="text-white">Free <span style="font-weight: bold; color: purple;">webp</span> Hosting Online 4ever</h3>
      </div>



      <form>
			  <div class="row justify-content-center">
				  <div class="col-12 col-md-8 col-lg-8 col-xl-6">

            <div class="row align-items-center mt-3">
              <div class="col">
                <input type="file" class="form-control-file" accept="image/webp" id="webp-input" name="webp_thevillainer" required>
                <h4 class="form-text text-left" id="file-error-text" style="display:none; color:rgb(250, 16, 40);">Only .webp file allowed!</h4>
              </div>
            </div>


            <!-- submit button -->
            <div class="row align-items-center mt-2">
              <div class="col text-center">
                <button class="btn btn-lg btn-primary button" type="submit" id="webp-submit-btn" disabled>Upload</button>
              </div>
            </div>
				  </div>
			  </div>
      </form>



      <p class="webp-img-name text-white mt-4" style="display: none;"></p>
      <img src="" style="display:none;" id="webp-img" class="text-center mx-auto d-block img-fluid rounded">

    </div>  


    <footer class="page-footer font-small blue pt-4">
      <div class="footer-copyright text-center py-3 text-white">Copyright &copy; 2019 The Villainer
      </div>
    </footer>




    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


    <script src="script.js"></script>
  </body>
</html>
result
console
?