堆栈内存溢出
  繁体   English   中英

单击按钮时，用用户选择的图像填充div

[英]Fill div with user selected image on button click

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

问题描述

我有一个带有4个buttons和4个divs的简单HTML页面，如下所示- 

 <!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>

我希望允许用户能够在单击按钮时从文件浏览器中选择特定图像，并在相应的div显示该图像。 例如。 当用户单击Image 1 ，文件浏览器应要求他选择图像，该图像在被选择后将显示在特定的div中。 我希望用户能够对所有4个div和按钮执行此操作。 长期以来一直坚持下去，不胜感激！

3 个解决方案

解决方案1
 2 已采纳  2017-04-05 10:05:53

这是我使用的方法，尽管不确定这是否对您有用，但可能会引起您的注意 

<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>

解决方案2
 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>

解决方案3
 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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用按钮单击选择的数组行数据填充div内容 - 仅返回最后一行 当用户单击按钮时用 json 填充数组 如何用用户上传的图片填充一个div？ 在按钮上单击获取日历，在html中单击并填写带有选定日期的文本 选择文件后如何立即上传图像，而不是强制用户单击单独的“上传”按钮？ 用户在父div中单击时单击按钮 在按钮上单击显示隐藏的div并更改图像？ 隐藏/显示 Div Class 点击图像按钮 javascript单击按钮并在div中创建图像 jQuery将HTML更改为div单击按钮的功能：selected
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM