Question

请检查此代码

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

我创建了一个表格。我希望能够使用文件上传输入来上传图像。选择图像后，我想在文件选择器框的正下方显示图像的缩略图，并在图像的右上角显示一个关闭（x）标记，该标记可用于删除图像。

我正在尝试按照以下示例（https://codepen.io/brissmyr/pen/egidw）使用CSS（而非字体）创建X，但无法创建。我究竟做错了什么？我所看到的只是图像框右上角的两个垂直条，但它们并没有进行45度变换。我怀疑这可能是CSS转换问题，但我可能错了

代码是

/*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.textContent = "x";*/
  /*dont want font*/
  closeButtonLink.setAttribute('href', "#");
  closeButtonLink.classList.add("close");
  document.querySelector('#imageContainer').appendChild(newImage);

  document.querySelector('#imageContainer').appendChild(closeButtonLink);

}

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 {
  position: relative;
  margin: 0px;
  padding: 0px
  /*right: 80px;
      top:80px;
      width: 32px;
      height: 32px;
      */
  opacity: 0.3;
}

.close:hover {
  opacity: 1;
}

.close:before,
.close:after {
  /*position: relative;*/
  /*left: 15px;*/
  border: 1px solid black;
  top: 0px;
  right: 80px;
  content: ' ';
  /*height: 33px;*/
  width: 2px;
  background-color: #333;
}

.close:before {
  transform: rotate(45deg);
}

.close:after {
  transform: rotate(-45deg);
}

<!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>
  <!--a href="#" class="close"></a-->

  <div id="form-div" class="body__div--background">
    <form id="new-question-form" class="practice-question-form" [formGroup]="practiceQuestionForm" (ngSubmit)="addPracticeQuestion()" novalidate>

      <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" multiple onchange="handleFileSelect(this.files)">

          <label style="width:50%" class="custom-file-label" for="question-file-upload"></label>


        </div>

      </div>
      <div id="imageContainer"></div>
      <button type="submit" id="submit-practice-question-button" class="content-div__button--blue"> Submit! </button>
    </form>
  </div>
</body>

Answer 1

默认情况下，伪元素是内联的，因此必须应用display：block或display：inline-block来转换它们，请在下面的代码段中进行检查

/*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.textContent = "x";*/
  /*dont want font*/
  closeButtonLink.setAttribute('href', "#");
  closeButtonLink.classList.add("close");
  document.querySelector('#imageContainer').appendChild(newImage);

  document.querySelector('#imageContainer').appendChild(closeButtonLink);

}

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 {
  position: relative;
  margin: 0px;
  padding: 0px
  /*right: 80px;
      top:80px;
      width: 32px;
      height: 32px;
      */
  opacity: 0.3;
}

.close:hover {
  opacity: 1;
}

.close:before,
.close:after {
  /*position: relative;*/
  /*left: 15px;*/
  border: 1px solid black;
  top: 0px;
  right: 80px;
  content: 'X';
  /*height: 33px;*/
  width: 2px;
  display: inline-block;
  background-color: #333;
}

.close:before {
  transform: rotate(45deg);
}

.close:after {
  transform: rotate(-45deg);
}

<!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>
  <!--a href="#" class="close"></a-->

  <div id="form-div" class="body__div--background">
    <form id="new-question-form" class="practice-question-form" [formGroup]="practiceQuestionForm" (ngSubmit)="addPracticeQuestion()" novalidate>

      <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" multiple onchange="handleFileSelect(this.files)">

          <label style="width:50%" class="custom-file-label" for="question-file-upload"></label>


        </div>

      </div>
      <div id="imageContainer"></div>
      <button type="submit" id="submit-practice-question-button" class="content-div__button--blue"> Submit! </button>
    </form>
  </div>
</body>

无法在纯CSS中显示关闭按钮

1 个答案: