0

I know there is <input type="file"/> but I have an <img> inside of <div> and I would love to ask for user to upload an image after clicking on that <div>. This is the code I have:

<div class="container">
                <img src="..." alt="Profile image" class="profileImg">
                <div class="overlay">
                    <i class="fas fa-pencil-alt text"></i>
                </div>
            </div>

Is this possible only in HTML or do I need JS or something else?

crodev
  • 1,323
  • 6
  • 22
  • 39
  • https://stackoverflow.com/questions/22087076/how-to-make-a-simple-image-upload-using-javascript-html this might help – Dave Nov 26 '18 at 18:32
  • This doesn't really make much sense. If you have an `` element, it will already have a URL. Why would you want the browser to upload it to the server? – Quentin Nov 26 '18 at 18:38
  • `alt="Profile image"` — Read this: http://www.alanflavell.org.uk/alt/alt-text.html – Quentin Nov 26 '18 at 18:39

3 Answers3

1

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#image')
                    .attr('src', e.target.result)
                    .width(150)
                    .height(200);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }
.uploader {
opacity: 0;
position: absolute;
z-index: 1;
left: 0;
top: 0;
}

.container {
position: relative
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
                <img src="..." alt="Profile image" id='image' class="profileImg">
                <input type='file' class='uploader' onchange="readURL(this);" />
                <div class="overlay">
                    <i class="fas fa-pencil-alt text"></i>
                </div>
            </div>

You can take reference from above code. I click on image to add src to it and show it

Aman Seth
  • 195
  • 1
  • 9
1

If I am reading you right, you want to click an image to initiate the open file dialogue box, or prompt users on mobile to take a picture. You wanted it in just HTML, you can try this, however, it has a tiny bit of inline CSS.

Cheers, Martin

<label for='image'>
<img src='image/source.png'>
<input type='file' id='image' style='display:none;' name='image'>
</label>
That Geezer
  • 13
  • 3
0

Custom styling of file inputs can be tricky, but there is a helpful article on codrops here.

Basically, you want to style and customize <input type="file"> in a semantic, accessible way using the <label> element.

HTML:

<input type="file" name="file" id="file" class="inputfile" />

<!-- The magic that makes it work -->
<label for="file">Choose a file</label>

CSS:

/* Hiding the default input */
.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

/* Styling the new label */
.inputfile + label {
    font-size: 1.25em;
    font-weight: 700;
    color: white;
    background-color: black;
    display: inline-block;
    padding: 40px;
}

.inputfile:focus + label,
.inputfile + label:hover {
    background-color: red;
}

/* Accessibility */
.inputfile + label {
    cursor: pointer; /* "hand" cursor */
}

/* Keyboard Navigation */
.inputfile:focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}
jorscobry
  • 113
  • 7