Bootstrap Snippet choose file using HTML CSS Bootstrap Javascript

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
        <div class="row">
            <div class="image-upload">
                <div class="col-md-4">
                    <div class="upload_box">
                        <label for="choosefile">
                            Click & Upload file
                            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTjeLLLePdlGJhp9y8sBsg2z2JEjjnsBpmkEwhNcoUBDapZopVT" class="iconimg" />
                        </label>
                        <input type="file" name="file" id="choosefile">
                        <div class="dimg">
                            <img src="" id="choosefileimg"  />
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="upload_box">
                        <label for="iguruupload">
                            Click & Upload file
                            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTjeLLLePdlGJhp9y8sBsg2z2JEjjnsBpmkEwhNcoUBDapZopVT" class="iconimg" />
                        </label>
                        <input type="file" name="file" id="iguruupload">
                        <div class="dimg">
                            <img src="" id="iguruuploadimg"  />
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="upload_box">
                        <label for="portalfile">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
img{max-width: 100%;}
        .image-upload  input
        {
            display: none;
        }
        .image-upload .iconimg
        {
            width: 80px;
            cursor: pointer;
            text-align: center;
            margin: 0 auto;
            display: block
        }
        .image-upload label{display: block;text-align: center;}
        .upload_box {
            border: 1px solid #f9f9f9;
            margin-top: 10px;
            padding: 10px;
            background: #ffffff;
            box-shadow: 2px 2px 10px rgba(221, 221, 221, 0.56);
            border-radius: 3px;
        }
        .dimg img {
            max-width: 100%;
            height: 100%;
        }
        .dimg {
            width: auto;
            height: 150px;
            overflow: hidden;
            text-align: center;
            margin: 0 auto;
        }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
  function iguruURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
                $('#choosefileimg').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#choosefile").change(function(){
        iguruURL(this);
    });
    function portalURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
                $('#iguruuploadimg').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
     $("#iguruupload").change(function(){
        portalURL(this);
    });
     function panURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
                $('#portalimg').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"choose file"
Bootstrap 3.3.0 Snippet by ravindra93

Related: See More

Questions / Comments:

"choose file" Bootstrap 3.3.0 Snippet by ravindra93

Related: See More

Questions / Comments:

"choose file"
Bootstrap 3.3.0 Snippet by ravindra93