【发布时间】：2019-01-09 23:57:45
【问题描述】：
请检查此代码
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>【问题讨论】：
-
通过在 Google 中逐字输入您的问题标题，可以轻松找到该副本，顺便说一句。
-
我怀疑问题是 css 转换，但似乎不是。基本上我正在尝试复制代码以在纯 css 中创建 X，但我无法这样做。我认为这可能是转换的一些问题，但可能不是。它是别的东西，但我不知道是什么
-
你的伪元素没有高度，所以你在这里旋转的基本上是两个小方块开始，所以你看不到太多效果。
-
谢谢。你对身高的评论是相关的，但还有一个问题。只有当我给它们
position:absolute即.close:before, .close:after { position:absolute}时，我才能转换pseudo-elements。没有这个，我只会看到竖线。解决方法是我给imageContainer一个相对位置，然后我给伪元素绝对位置并将left设置为95（因为图像是80，高度是31，所以80+15=95，几乎是中心）。但我不明白为什么position:absolute很重要。你会知道吗？我已经更新了代码 - codepen.io/manuchadha/pen/PBKYBJ -
“但我不明白为什么 position:absolute 很重要。你知道吗？” - 因为这里给出的答案以及副本中解释了什么......绝对定位不是需要才能工作，它只是隐含地解决了这个问题.
标签： javascript html css css-animations