stackoom
  简体   繁体   中英

Fill div with user selected image on button click

 原文  2017-04-05 10:01:54  1   3    javascript/ html/ css/ file/ image-uploading

Question

I have a simple HTML page with 4 buttons and 4 divs positioned as shown below - 

 <!DOCTYPE html> <html> <head> <style> div.top { position: relative; left: 205px; width: 200px; height: 200px; border: 3px solid #000000; } div.left { position: relative; top: 0px; right: 0; width: 200px; height: 200px; border: 3px solid #000000; } div.right { position: relative; bottom: 205px; left: 410px; width: 200px; height: 200px; border: 3px solid #000000; } div.bottom { position: relative; bottom: 205px; left: 205px; width: 200px; height: 200px; border: 3px solid #000000; } </style> </head> <div class="top"></div> <div class="left"></div> <div class="right"></div> <div class="bottom"></div> <button type="button">Image 1</button> <button type="button">Image 2</button> <button type="button">Image 3</button> <button type="button">Image 4</button> </body> </html>

I would like to allow the user to be able to select a particular image from the file browser, when a button is clicked, and display the same in the corresponding div . For eg. When the user clicks Image 1 , a file browser should ask him to chose an image, which after being selected, will show in the particular div. I want the user to be able to do this for all the 4 divs and buttons. BEen stuck on this for too long, any help is much appreciated!

3 answers

solution1
 2 ACCPTED  2017-04-05 10:05:53

Here's what I use, although not sure if this will work on you, it might give the idea to follow 

<input type="file" name="profile_photo" id="fileInput" onchange="loadFile(event)" required>
<div>
    <img class="" id="output"> // This is where the image will be shown
</div>

<script>
    var loadFile = function(event) {
        var reader = new FileReader();
        reader.onload = function(){
          var output = document.getElementById('output');
          output.src = reader.result;
        };
        reader.readAsDataURL(event.target.files[0]);
    };
</script>

solution2
 2  2017-04-05 12:53:11

<!DOCTYPE html>
<html>
<head>
<style>
div.top {
    position: relative;
    left: 205px;
    width: 200px;
    height: 200px;
    border: 3px solid #000000;
} 

div.left {
    position: relative;
    top: 0px;
    right: 0;
    width: 200px;
    height: 200px;
    border: 3px solid #000000;
}
div.right {
    position: relative;
    bottom: 205px;
    left: 410px;
    width: 200px;
    height: 200px;
    border: 3px solid #000000;
}
div.bottom {
    position: relative;
    bottom: 205px;
    left: 205px;
    width: 200px;
    height: 200px;
    border: 3px solid #000000;
}
.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
    display: inline-block;
    background-color: #3F51B5;
    height: 35px;
    width: 100px;
    text-align: center;
    line-height: 30px;
    color: white;
    font-size: 18px;
    font-family: cursive;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
.imgView{
    width:100%;
    height:100%;
}
.vedioView{
    width:100%;
    height:100%;
}
</style>
</head>
<h1>Select Image And Display In Div</h1>
<div class="top" id="img1Div">
    <img class="imgView" id="img1DivImg">
</div>
<div class="left" id="img2Div">
    <img class="imgView" id="img2DivImg">
</div>
<div class="right" id="img3Div">
    <img class="imgView" id="img3DivImg">
</div>
<div class="bottom" id="img4Div">
    <img class="imgView" id="img4DivImg">
</div>

<div class="fileUpload btn btn-primary">
    <span>Image 1</span>
    <input type="file" id="img1" class="upload" onchange="setImageToDiv(this)"/>
</div>
<div class="fileUpload btn btn-primary">
    <span>Image 2</span>
    <input type="file" id="img2" class="upload" onchange="setImageToDiv(this)"/>
</div>
<div class="fileUpload btn btn-primary">
    <span>Image 3</span>
    <input type="file" id="img3" class="upload" onchange="setImageToDiv(this)"/>
</div>
<div class="fileUpload btn btn-primary">
    <span>Image 4</span>
    <input type="file" id="img4" class="upload" onchange="setImageToDiv(this)"/>
</div>
<h1>Select Vedio And Display In Div</h1>
<div class="top" id="vedio1Div">
    <video class="vedioView" id="vedio1DivVedio" width="320" height="240" controls> 
    Your browser does not support the video tag.
    </video>
</div>
<div class="left" id="vedio2Div">
    <video class="vedioView" id="vedio2DivVedio" width="320" height="240" controls> 
    Your browser does not support the video tag.
    </video>
</div>
<div class="right" id="vedio3Div">
    <video class="vedioView" id="vedio3DivVedio" width="320" height="240" controls> 
    Your browser does not support the video tag.
    </video>
</div>
<div class="bottom" id="vedio4Div">
    <video class="vedioView" id="vedio4DivVedio" width="320" height="240" controls> 
    Your browser does not support the video tag.
    </video>
</div>

<div class="fileUpload btn btn-primary">
    <span>Vedio 1</span>
    <input type="file" id="vedio1" class="upload" onchange="setVedioToDiv(this)"/>
</div>
<div class="fileUpload btn btn-primary">
    <span>Vedio 2</span>
    <input type="file" id="vedio2" class="upload" onchange="setVedioToDiv(this)"/>
</div>
<div class="fileUpload btn btn-primary">
    <span>Vedio 3</span>
    <input type="file" id="vedio3" class="upload" onchange="setVedioToDiv(this)"/>
</div>
<div class="fileUpload btn btn-primary">
    <span>Vedio 4</span>
    <input type="file" id="vedio4" class="upload" onchange="setVedioToDiv(this)"/>
</div>
<script>
    var setImageToDiv = function(event) {
        var myVar = event;
        if(myVar.files[0].type.split('/')[0] != "image"){
            alert("Please select Image Only");
        }
        else{
            var reader = new FileReader();
            reader.onload = function(){
                var fUploadID = myVar.getAttribute('id');
                var imageSrc = document.getElementById(fUploadID + 'DivImg');
                imageSrc.src = reader.result;
            };
            reader.readAsDataURL(event.files[0]);
        }
    };
    var setVedioToDiv = function(event) {
        var myVar = event;
        if(myVar.files[0].type.split('/')[0] != "video"){
            alert("Please select video Only");
        }
        else{
            var reader = new FileReader();
            reader.onload = function(){
                var fUploadID = myVar.getAttribute('id');
                var imageSrc = document.getElementById(fUploadID + 'DivVedio');
                imageSrc.src = reader.result;
            };
            reader.readAsDataURL(event.files[0]);
        }
    };
</script>
</body>

</html>

solution3
 1  2017-04-05 13:52:06

 var setImageToDiv = function(event) { myVar = event; var reader = new FileReader(); reader.onload = function() { var fUploadID = myVar.getAttribute('id'); var imageSrc = document.getElementById(fUploadID + 'DivVedio'); imageSrc.src = reader.result; }; reader.readAsDataURL(event.files[0]); }; 
 div.top { position: relative; left: 205px; width: 200px; height: 200px; border: 3px solid #000000; } div.left { position: relative; top: 0px; right: 0; width: 200px; height: 200px; border: 3px solid #000000; } div.right { position: relative; bottom: 205px; left: 410px; width: 200px; height: 200px; border: 3px solid #000000; } div.bottom { position: relative; bottom: 205px; left: 205px; width: 200px; height: 200px; border: 3px solid #000000; } .fileUpload { position: relative; overflow: hidden; margin: 10px; display: inline-block; background-color: #3F51B5; height: 35px; width: 100px; text-align: center; line-height: 30px; color: white; font-size: 18px; font-family: cursive; } .fileUpload input.upload { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); } .vedioView { width: 100%; height: 100%; } 
 <div class="top" id="vedio1Div"> <video class="vedioView" id="vedio1DivVedio" width="320" height="240" controls> Your browser does not support the video tag. </video> </div> <div class="left" id="vedio2Div"> <video class="vedioView" id="vedio2DivVedio" width="320" height="240" controls> Your browser does not support the video tag. </video> </div> <div class="right" id="vedio3Div"> <video class="vedioView" id="vedio3DivVedio" width="320" height="240" controls> Your browser does not support the video tag. </video> </div> <div class="bottom" id="vedio4Div"> <video class="vedioView" id="vedio4DivVedio" width="320" height="240" controls> Your browser does not support the video tag. </video> </div> <div class="fileUpload btn btn-primary"> <span>Vedio 1</span> <input type="file" id="vedio1" class="upload" onchange="setImageToDiv(this)" /> </div> <div class="fileUpload btn btn-primary"> <span>Vedio 2</span> <input type="file" id="vedio2" class="upload" onchange="setImageToDiv(this)" /> </div> <div class="fileUpload btn btn-primary"> <span>Vedio 3</span> <input type="file" id="vedio3" class="upload" onchange="setImageToDiv(this)" /> </div> <div class="fileUpload btn btn-primary"> <span>Vedio 4</span> <input type="file" id="vedio4" class="upload" onchange="setImageToDiv(this)" /> </div>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Fill div content with array row data, selected by button click - only returning last row fill an array with json when user click on a button how to fill a div with an image the user uploads? get calender on button click in html and fill text filed with selected date How to upload image immediately after file is selected, rather than force user to click separate "Upload" button? click button when user clicks in parent div on button click display hidden div and change image? Hide/Show Div Class on image button click javascript click a button and create an image in a div Jquery change HTML to div on button click function :selected
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM