與按鈕用戶選擇的圖像填充的div點擊

我有4 buttons和4 divs定位簡單HTML頁如下 -與按鈕用戶選擇的圖像填充的div點擊

<!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和按鈕做到這一點。 BEen卡住了太久，任何幫助都非常感謝！

來源

2017-04-05 TheLuminor

如果是這種情況的代碼？你已經嘗試了什麼？ – ggdx

我擡頭看看如何讓用戶上傳圖片，我看到的所有代碼片段都包含了構建表單的功能。我是HTML新手，不確定是否有必要。因此我發佈了一個問題。 @丹白 – TheLuminor

文件只是另一種輸入類型。即使它是唯一的領域，它仍然是一種形式。 – ggdx

下面是我用，但不知道這是否會在你的工作，可能會給理念，遵循

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

來源

2017-04-05 10:05:53 Swellar

完全按照我想要的方式工作！任何想法，如果同樣的事情應該適用於視頻？ @Tesseract – TheLuminor

謝謝！奇蹟般有效！ @tesseract – TheLuminor

我還沒有試過視頻，但你可以試試這個。 – Swellar

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

來源

2017-04-05 12:53:11

嘗試使用此代碼，可以用您的特定要求回答您的問題。 –

剛剛嘗試過，感謝您提出高效的！ – TheLuminor

如果同樣的事情可以用於視頻，請讓我知道嗎？ @kinjal Akhani – TheLuminor

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> 
 
\t \t Your browser does not support the video tag. 
 
\t \t </video> 
 
</div> 
 
<div class="left" id="vedio2Div"> 
 
    <video class="vedioView" id="vedio2DivVedio" width="320" height="240" controls> 
 
\t \t Your browser does not support the video tag. 
 
\t \t </video> 
 
</div> 
 
<div class="right" id="vedio3Div"> 
 
    <video class="vedioView" id="vedio3DivVedio" width="320" height="240" controls> 
 
\t \t Your browser does not support the video tag. 
 
\t \t </video> 
 
</div> 
 
<div class="bottom" id="vedio4Div"> 
 
    <video class="vedioView" id="vedio4DivVedio" width="320" height="240" controls> 
 
\t \t Your browser does not support the video tag. 
 
\t \t </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>

來源

2017-04-05 13:52:06

@ TheLuminor - 請檢查上述修改代碼顯示Vedios而不是圖像。 –

非常感謝你@Kinjal Akhani我目前遠離我的終端，但我會盡快嘗試並讓你知道！謝謝！ – TheLuminor

與按鈕用戶選擇的圖像填充的div點擊

回答

相關問題