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

Question

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

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

我想让用户能够 select 单击按钮时文件浏览器中的特定图像，并在相应的 div 中显示相同的图像。例如。当用户单击 Image 1 时，文件浏览器应要求他选择一个图像，该图像在 selected 后将显示在特定的 div 中。我希望用户能够对所有 4 div 和按钮执行此操作。坚持这个太久了，非常感谢任何帮助！

Answer 1

这是我用的，虽然不确定这是否对你有用，但它可能会给你一个遵循的想法

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

Answer 2

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

Answer 3

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>

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

Fill div with user selected image on button click

html

javascript

css

file

image-uploading