代码之家 › 专栏 › 技术社区 › Maniraj Murugan

如何更改角度中的轮廓图片?

typescript angular css html javascript

Maniraj Murugan · 技术社区 · 7 年前

我正在制作angular 6应用程序,我正在使用图像上传选项,

Html:

<img [src]="url ? url : 'https://www.w3schools.com/howto/img_avatar.png'"> <br/>
<input type='file' (change)="onSelectFile($event)">

Ts:

  onSelectFile(event) {
    if (event.target.files && event.target.files[0]) {
      var reader = new FileReader();

      reader.readAsDataURL(event.target.files[0]); // read file as data url

      reader.onload = (event) => { // called once readAsDataURL is completed
        this.url = event.target.result;
      }
    }
  }

工作人员突击检查: https://stackblitz.com/edit/angular-file-upload-preview-ekyhgh

这是我做的东西 html input file 它将choosen文件显示为文本,但我需要在配置文件图像上单击它,文件夹需要从本地显示(在正常情况下,它将显示在单击choosen文件按钮上)。。

https://codepen.io/anon/pen/PXjaJv

在这里,您可以看到鼠标悬停在图像上,文本显示为 Drag your photo here or browse your computer .. (相同的文本出现在给定的链接默认值中,因为那里没有图片,但我需要悬停,因为我已经有了化身图像,所以悬停在我需要显示此更改配置文件图片文本的任何图像上)。。

忽视在此链接中剪切和删除图像 https://codepen.io/anon/pen/PXjaJv 但我唯一需要的是用户界面的变化,如悬停,使一个覆盖文本和点击文本,使浏览图片从计算机改变,然后改变个人资料图片与删除选项,这将返回到头像图像本身(如果删除)。。

请帮助我在不使用jquery的情况下使用纯角度/类型脚本方式获得结果。

2 回复 | 直到 7 年前

Stepan Kasyanenko 7 年前

你应该使用 label 贴上适当的标签 for 属性 对于 属性必须包含 id 属于 input 标签

看看这个例子。

<label class="hoverable" for="fileInput">
  <img [src]="url ? url : 'https://www.w3schools.com/howto/img_avatar.png'"> 
  <div class="hover-text">Choose file</div>
  <div class="background"></div>
</label>
<br/>
<input id="fileInput" type='file' (change)="onSelectFile($event)">
<button *ngIf="url" (click)="delete()" >delete</button>

stackblitz .

Akshay Rajput 7 年前

.css

p {
  font-family: Lato;
}

.image-container {
  position: relative;
  display: inline-block;
  text-align: center;
}

img {
  height: 200px;
  width: 200px;
  border: 5px solid #000;
  border-radius: 50%;
}

.select-profile-picture {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.message {
  position: absolute;
  width: 90%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 100%);
  transition: all 1s;
  opacity: 0;
}

.image-container:hover .message {
  transform: translate(-50%, -50%);
  opacity: 1;
}

.html

<div class="image-container">
 <img [src]="url ? url : 'https://www.w3schools.com/howto/img_avatar.png'" class=""> <br/>
 <input type='file' (change)="onSelectFile($event)" class="select-profile-picture">
 <span class="message">Tap here to select your picture</span>
</div>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前