Question

我有一个img标签和一个输入类型文件，

功能

功能是我将使用输入类型文件输入一个jpg文件，我需要在图像标签中显示此图像。

在角度2中怎么可能？

我的尝试 我试图在输入按钮的更改事件上获取文件路径并将其分配给图像文件的src。

尝试使用外部js文件解决它。

但是这两次尝试都失败了，是什么解决方案。

代码

HTML

   <img [src]="imagePath" width="100px">
   <input type="file" multiple (change)="onUpload(input)" #input >

Component.ts

import { Component, OnInit, NgModule } from '@angular/core';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
})
export class FormComponent implements OnInit {
//DECLARATION
  imagePath:string;

  constructor() { 
    this.onInitial();
    }

  ngOnInit() {}

  onInitial(){
    this.imagePath="../../assets/images/1.jpg"
  }
  onUpload(event){
    console.log(event);
  }

}

我需要在 onUpload（）中编写什么代码，以便将输入图像的路径分配给变量imagePath。

请帮帮我。

Answer 1

没试过Angular2。虽然您应该能够将img src设置为Blob URL File input.files个FileList对象的webkitRelativePath。

在铬，铬，你可以从File对象得到webkitRelativePath，虽然该属性是“非标准的”，可能可以设置为空字符串;也就是说，不应该依赖于用户文件系统中所选文件的相对路径。

File.webkitRelativePath

此功能不符合标准，不符合标准。不要在面向Web的生产站点上使用它：它不会适用于所有人用户。两者之间可能存在很大的不兼容性实现和行为可能在未来发生变化。

File

File接口的"C:\fakepath\"属性必须返回文件的相对路径，如果未指定，则为空字符串。

4.10.5.1.18. File Upload state (type=file)

EXAMPLE 16由于历史原因，value IDL属性使用字符串value为文件名添加前缀。一些遗产用户代理实际上包括完整路径（这是一个安全性漏洞）。因此，从中获取文件名以向后兼容的方式<!DOCTYPE html> <html> <head> </head> <body> <img src="" width="100px" alt="preview"> <input type="file" multiple onchange="onUpload(this)" id="input" accepts="image/*" /> <br><label for="input"></label> <script> let url; function onUpload(element) { console.log(element) let file = element.files[0]; if (url) { URL.revokeObjectURL(url); } url = URL.createObjectURL(file); if ("webkitRelativePath" in file && file.webkitRelativePath !== "") { element.labels[0].innerHTML = file.webkitRelativePath; } else { element.labels[0].innerHTML = element.value; } element.previousElementSibling.src = url; element.value = null; } </script> </body> </html> IDL属性并非易事。

另见How FileReader.readAsText in HTML5 File API works?

static final ImmutableMap<Token, Integer> precedences =
      new ImmutableSetMultimap.Builder<Integer, Token>()
      .put(0, NOT)
      .put(1, ASSIGN)
      .put(2, OR)
      .put(3, AND)
      .putAll(4, NOT_EQUAL, EQUALS)
      .putAll(5, LESS_EQUAL, LESS, GREATER_EQUAL, GREATER)
      .putAll(6, ADD, SUB)
      .putAll(7, MUL, DIV, MOD).build().inverse();

Answer 2

最后我得到了自己的答案，

<强> https://github.com/ribizli/ng2-imageupload

这对你有用。它可以帮助你解决这个问题。

如何在页面中显示输入照片的预览？

2 个答案: