javascript - 如何让我上传的图片从竖排变成横排？

标签 javascript html css

我尝试了很多方法来更改代码中 css 中的边距和其他内容，但没有任何效果。 我唯一要问的是我应该在哪里更改代码以使我的图片方向从垂直上传到水平后。

这是代码:

function showMyImage(fileInput) {
    var files = fileInput.files;
    for (var i = 0; i < files.length; i++) {           
        var file = files[i];
        var imageType = /image.*/;     
        if (!file.type.match(imageType)) {
            continue;
        }           
        var img=document.createElement("img");
        img.style.width = "20%";
        img.style.marginTop = "10px";
        img.alt = "image";
        img.classList.add("thumbnail");
        var reader = new FileReader();
        reader.onload = (function(aImg) { 
            return function(e) { 
                aImg.src = e.target.result; 
            }; 
        })(img);
        reader.readAsDataURL(file);
        var gallery = document.querySelector(".gallery");
        var div = document.createElement("div");
        div.style.display = "inline-block";
        div.appendChild(img);
        gallery.appendChild(div);
    }    
}

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
 output.innerHTML = this.value;
}

const buttonPrintOrSaveDocument = document.querySelector(
    ".button-print-or-save-document"
);

function printOrSave() {
    window.print();
}

buttonPrintOrSaveDocument.addEventListener("click", printOrSave);
label textarea{
        vertical-align: top;i
    }

    div { text-align: left; }



.thumbnail {
    display: block;
    margin-bottom: 10px;
}
.gallery {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.gallery > div {
    margin-right: 10px;
}
.gallery img {
  display: inline-block;
  
  object-fit: cover;
  margin: 5px;
}



.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}
<h1 align="center"> DATABASE </h1>

<h3> <b>Diametri i gypit: </b> </h3>                        

<div class="slidecontainer">
  <input type="range" min="63" max="1800" value="63" class="slider" id="myRange"> 
  <h4 align="left"> fi ɸ : <span id="demo"></span> mm</h4>
</div>

<label for="lang"><b> Materiali Gypit </b> </label>
<select name="Materiali" Id="lang">
  <option value="Azbest">Azbest</option>
  <option value="GRP">GRP</option>
  <option value="Pllastik">Pllastik</option>
  <option value="Heker Cingtun">Heker Cingtun</option>
</select>

<div>
   <p> <b> Anëtarët: </b></p> <textarea rows="5" cols="20"  ></textarea>
</div>

<label>     
<p><label for="w3review" value="Fshati"> <b> Fshati: </b></label></p>
<textarea id="w3review" name="w3review" rows="2" cols="20"> </textarea>
<form action="/action_page.php">
<p><label for="w3review" value="Përshkrimi"> <b> Përshkrimi: </b> </label></p>
<textarea id="w3review" name="w3review" rows="4" cols="80"> </textarea>
<! -- Upload picture --> 

<p> <b> Ngarko foto: </b> </p>
<input type="file" accept="image/*"  onchange="showMyImage(this)" multiple id="gallery-photo-add" />
<br/>
<div class="gallery"></div>
<br/>
<img id="thumbnil"  src="your_image_url" width="300" height="200" alt="image"/>
<br>
<br>
<br>
<br>    
</br>                       
</br>
<button class="button-print-or-save-document">Ruaj</button>

如果有人可以帮助我，我将不胜感激。

最佳答案 

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Defekt</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body>
      <style>                                                 
         label textarea{
         vertical-align: top;i
         }
         div { text-align: left; }
         .thumbnail {
         display: block;
         margin-bottom: 10px;
         }
         .gallery {
         display: flex;
         /*flex-wrap: wrap; */
         margin-top: 10px;
         }
         .gallery > div {
         margin-right: 10px;
         }
         .gallery img {
         display: inline-block;
         object-fit: cover;
         margin: 5px;
         }
         .slidecontainer {
         width: 100%;
         }
         .slider {
         -webkit-appearance: none;
         width: 100%;
         height: 25px;
         background: #d3d3d3;
         outline: none;
         opacity: 0.7;
         -webkit-transition: .2s;
         transition: opacity .2s;
         }
         .slider:hover {
         opacity: 1;
         }
         .slider::-webkit-slider-thumb {
         -webkit-appearance: none;
         appearance: none;
         width: 25px;
         height: 25px;
         background: #04AA6D;
         cursor: pointer;
         }
         .slider::-moz-range-thumb {
         width: 25px;
         height: 25px;
         background: #04AA6D;
         cursor: pointer;
         }
      </style>
      <h1 align="center"> DATABASE </h1>
      <h3> <b>Diametri i gypit: </b> </h3>
      <div class="slidecontainer">
         <input type="range" min="63" max="1800" value="63" class="slider" id="myRange"> 
         <h4 align="left"> fi ɸ : <span id="demo"></span> mm</h4>
      </div>
      <label for="lang"><b> Materiali Gypit </b> </label>
      <select name="Materiali" Id="lang">
         <option value="Azbest">Azbest</option>
         <option value="GRP">GRP</option>
         <option value="Pllastik">Pllastik</option>
         <option value="Heker Cingtun">Heker Cingtun</option>
      </select>
      <div>
         <p> <b> Anëtarët: </b></p>
         <textarea rows="5" cols="20"  ></textarea>
      </div>
      <label>
         <p>
      <label for="w3review" value="Fshati"> <b> Fshati: </b></label></p>
      <textarea id="w3review" name="w3review" rows="2" cols="20"> </textarea>
      <form action="/action_page.php">
      <p><label for="w3review" value="Përshkrimi"> <b> Përshkrimi: </b> </label></p>
      <textarea id="w3review" name="w3review" rows="4" cols="80"> </textarea>
      <! -- Upload picture --> 
      <p> <b> Ngarko foto: </b> </p>
      <input type="file" accept="image/*"  onchange="showMyImage(this)" multiple id="gallery-photo-add" />
      <br/>
      <div class="gallery"></div>
      <br/>
      <img id="thumbnil"  src="your_image_url" width="300" height="200" alt="image"/>
      <br>
      <br>
      <br>
      <br>
      </br>                       
      </br>
      <button class="button-print-or-save-document">Ruaj</button>
      <script>
         <!-- Ruaj Foton -- !>
         
         
         function showMyImage(fileInput) {
         var files = fileInput.files;
         for (var i = 0; i < files.length; i++) {           
         var file = files[i];
         var imageType = /image.*/;     
         if (!file.type.match(imageType)) {
         continue;
         }           
         var img=document.createElement("img");
         img.style.width = "20%";
         img.style.marginTop = "10px";
         img.alt = "image";
         img.classList.add("thumbnail");
         var reader = new FileReader();
         reader.onload = (function(aImg) { 
         return function(e) { 
             aImg.src = e.target.result; 
         }; 
         })(img);
         reader.readAsDataURL(file);
         var gallery = document.querySelector(".gallery");
         var div = document.createElement("div");
         div.style.display = "inline-block";
         div.appendChild(img);
         gallery.appendChild(div);
         }    
         }
         
         
         
         
         
         
         
         var slider = document.getElementById("myRange");
         var output = document.getElementById("demo");
         output.innerHTML = slider.value;
         
         slider.oninput = function() {
         output.innerHTML = this.value;
         }
         
         
         
         
         
         const buttonPrintOrSaveDocument = document.querySelector(
         ".button-print-or-save-document"
         );
         
         function printOrSave() {
         window.print();
         }
         
         buttonPrintOrSaveDocument.addEventListener("click", printOrSave);
         
      </script>
   </body>
</html>

您可以尝试以下方法: 在上面的代码中我对CSS部分进行了更改。

.gallery {
  display: flex;
  /* flex-wrap: wrap; */
  margin-top: 10px;
}

如果我正确理解您的问题，那么您希望在上传后水平显示图像。

关于javascript - 如何让我上传的图片从竖排变成横排？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/76198208/

上一篇：powershell - 如何为枚举创建转换器

下一篇：postgresql - Postgres View 定义 (pgAdmin) 被删除注释？

相关文章：

javascript - 为带按钮的 div 设置 InnerHTML

javascript - 等待CSS中的背景图片完全加载

JavaScript/ react : How to detect `await` call and setState accordingly?

html - 仅CSS的砌体布局

html - 在单独的 .css 样式表中正确使用自定义字体

css - 为什么通过 "margin"技巧居中的大 div 从左侧切掉

javascript - 检查一个数组的字符串是否作为另一个数组字符串的一部分出现

php - 如何使用简单的 html dom 解析器从 scrape 中抓取特定数据

html - 添加类 row 而不是 col-md-12 会使 div 无法覆盖屏幕的整个宽度。有人可以帮我理解这背后的原因吗？

css - 2个div彼此相邻，不使用宽度

©2024 IT工具网  联系我们