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

【问题标题】：Fill div with user selected image on button click在按钮单击时用用户选择的图像填充 div
【发布时间】：2017-04-05 10:01:54
【问题描述】：

我有一个简单的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>

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

【问题讨论】：

这个代码在哪里？你已经尝试过什么？
我查看了如何允许用户上传图片，我看到的所有代码 sn-ps 都包括构建表单。我是 HTML 新手，不确定是否有必要。因此我发布了一个问题。 @丹·怀特
文件只是另一种输入类型。即使是唯一的字段，它仍然是一个表单。

标签： javascript html css file image-uploading

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

【讨论】：

完全按照我想要的方式工作！知道同样的事情是否适用于视频吗？ @Tesseract
谢谢！奇迹般有效！ @tesseract
如果没有，请发布另一个问题

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

【讨论】：

试试这个代码，可以根据您的具体要求回答您的问题。
刚试了下，谢谢你的高效率！
能否让我知道同样的方法是否适用于视频？ @kinjal Akhani
@KinjalAkhani 您可以改为将您的代码组合成 1 个答案，或者至少放置某种标签
试试这个代码，在这个代码中，我有结合逻辑来选择图像和视频与 2 个不同的部分，如果用户上传文件而不是图像，则在图像部分的情况下，将显示警报消息并应用相同的东西视频也。愿这能满足你的要求

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

【讨论】：

@TheLuminor - 请检查上述修改后的代码以显示视频而不是图像。
非常感谢@Kinjal Akhani 我目前不在终端，但我会尽快尝试并通知您！谢谢！