javascript - 如何使用关闭按钮从图像创建缩略图-6ren

javascript - 如何使用关闭按钮从图像创建缩略图

转载作者：行者123 更新时间：2023-11-28 01:18:51

这是我的代码:

https://codepen.io/manuchadha/pen/PBKYBJ

我已经创建了一个表单。我希望能够使用文件上传输入来上传图像。选择图像后，我想在文件选择器框下方显示图像的缩略图，并在图像的右上角显示一个关闭 (x) 符号，可用于删除图像。但我无法创建它。我做错了什么？

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <base href=""> 
  <title>Example</title>
  <!--meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"-->
  <link rel="stylesheet" media="screen" href="fiddle.css">
  
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="fiddle.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
 
  
</head>
<body>
    
  <div id="form-div" class="body__div--background"> <!-- takes the complete width/height of content section -->
    <!-- The novalidate attribute in the <form> element prevents the browser from attempting native HTML validations.
    validation will be done using Angular's Validators which come with FormGroups and FormControls-->
    <form id="new-question-form" class="practice-question-form" [formGroup]="practiceQuestionForm" (ngSubmit)="addPracticeQuestion()" novalidate>
      <!-- label and small in same line. select in a new line, thus enclosed select in a div-->
      <div class="form-group">
      
      <div class="form-group">
        <label for="file-upload" class="control-label required">Upload files</label>
      
        <div class="custom-file" id="file-upload" lang="es">
          <input type="file" class="custom-file-input" id="question-file-upload" onchange="handleFileSelect()">
          <label class="custom-file-label" for="question-file-upload">
            Select file...
          </label>        
        </div>
      </div>

  <button type="submit"  id="submit-practice-question-button" class="content-div__button--blue"> Submit! </button>
    </form>
    <div id="imageContainer">
      </div>
      </div>
</div> 
</body>

CSS

body{
  margin:0px;
}

.body__div--background {
  background: linear-gradient(45deg,#33b1f8 37%,#6e90f6 100%); /*syntax linear-gradient(direction, color1 limit, color2 limit)*/
  color:#555555;
  font-family: Helvetica;
  line-height:1.5;
  font-size: 11px;
  letter-spacing: 0.25px;
}




#submit-practice-question-button{
  display:block;
}

#imageContainer{
  display:inline-block;
  border: 1px solid black;
}

.close {
  top:0;
  right:80; /*match the width of the image*/
  position: relative;
  opacity: 0.3;
}
.close:hover {
  opacity: 1;
}
.close:before, .close:after {
  position: relative;
  
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #333;
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}

 /*handler for file upload*/
  function handleFileSelect(){
    console.log("got file upload event:");
    /*
     FileList object is the object returned as a result of a user selecting files using the <input> element,
     from a drag and drop operation's DataTransfer object, or from the mozGetAsFile() API on an HTMLCanvasElement.
     */
    var files = document.getElementById('question-file-upload').files;//event.target.files;
    console.log("files selected:"+files+", total selected: "+files.length);
    for(var i=0;i<files.length;i++)
    {
      console.log("files name:"+files[i].name)
      console.log("files object:"+files[i])
    }

    //working with only 1 file at the moment
    var file = files[0];

    if (files && file) {
      /*
      The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer,
      using File or Blob objects to specify the file or data to read.
       */
      var reader = new FileReader();

      /*bind onload event of FileReader to _handleReaderLoaded
      onload is a handler for the load event. This event is triggered by FileReader each time the reading operation is successfully completed.
       */
      reader.onload =this._handleReaderLoaded.bind(this);

      reader.readAsBinaryString(file);
    }
  }

  function _handleReaderLoaded(readerEvt) {
    var binaryString = readerEvt.target.result;
    var base64textString= btoa(binaryString);
    console.log(btoa(binaryString));
    var src = "data:image/png;base64,";
    src += base64textString;
   
    var newImage = document.createElement('img');
    newImage.src = src;
    newImage.width = newImage.height = "80";
    var closeButtonLink = document.createElement('a');
   closeButtonLink.setAttribute('href',"#"); 
 closeButtonLink.classList.add("close");   
document.querySelector('#imageContainer').appendChild = newImage;
    document.querySelector('#imageContainer').appendChild = closeButtonLink;
    
    
  }

最佳答案

appendChild是方法，不是属性。

例如 node.appendChild = newImage; 应该是 node.appendChild(newImage);

您还需要在 anchor 标记中添加“X”。我将其包含在下面的示例中。

还有一件事我也做了一个小的性能升级，您将对查询的引用保存在一个变量中，这样您就不需要查询 DOM 两次。

var closeButtonLink = document.createElement('a');
closeButtonLink.textContent = "X";
closeButtonLink.setAttribute('href', "#");
closeButtonLink.classList.add("close");

// use a var here to only query once for imageContainer
var imgc = document.querySelector('#imageContainer');
imgc.appendChild(newImage);
imgc.appendChild(closeButtonLink);

关于javascript - 如何使用关闭按钮从图像创建缩略图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51642154/

文章推荐： css - ionic 3 为每个设备导入字体

文章推荐： html - 使用 CSS 进行响应式设计的布局样式

html - 缩 child 子以适应 parent
我有一个具有可变数量子元素的固定大小的 div。我不知道 children 的大小。目标是缩小它们以适合父级。例子: .parent { width: 100px; height: 100p

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何使用关闭按钮从图像创建缩略图