1. ホーム
  2. 質問と答え
  3. 入力写真のプレビューをページに表示する方法は？

入力写真のプレビューをページに表示する方法は？

2016-11-04 17 views
1

私はimgタグと入力タイプのファイルを持って、機能は私が入力1 JPGファイル入力タイプのファイルを使用しますです入力写真のプレビューをページに表示する方法は？

機能が、私は、画像タグでこの画像を表示する必要があります。

角度2ではどうなりますか？

マイ試行 私は、入力ボタンの変更イベント上のファイルパスを取得し、画像ファイルのSRCにそれを割り当てようとしました。

外部のjsファイルを使用して解決しようとしました。

これらの試行は両方とも失敗ですが、これを解決する方法は何ですか？

コード

HTMLコードは、私がonUpload（内側に記述する必要がどのような

<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); 
    } 

}

）入力のパスを割り当てます画像を変数imagePathに渡します。

私を助けてください。

出典

2016-11-04 Aswin KV

答えて

2

Angular2を試したことがありません。あなたが最初にFileオブジェクトのimgsrc~Blob URLをinput.files のオブジェクトに設定できるはずですが。

クロムでは、FileオブジェクトからwebkitRelativePathを得ることができますが、プロパティは「非標準」であり、空の文字列に設定することもできます。つまり、ユーザファイルシステム上の選択されたファイルへの相対パスに依存すべきではありません。

File.webkitRelativePath

この機能は非標準であり、標準化トラックにではありません。 をウェブに直面している制作サイトで使用しないでください： ユーザーごとに機能するわけではありません。また、 の実装間に大きな非互換性があり、今後の動作が変更される可能性があります。

File

指定されていない場合FileインタフェースのwebkitRelativePath属性が ファイルの相対パス、または空の文字列を返す必要があります。歴史的な理由

4.10.5.1.18. File Upload state (type=file)

EXAMPLE 16、value IDLは、文字列"C:\fakepath\"とファイル名 プレフィックスを属性。いくつかの従来の ユーザエージェントにはフルパス（セキュリティー 脆弱性）が含まれていました。その結果、後方互換性のある方法で value IDL属性からファイル名を取得することは、自明ではありません。最後に

も参照してくださいHow FileReader.readAsText in HTML5 File API works?

<!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>

出典

2016-11-04 21:18:44 guest271314

+0

私はこれを試していましたが、要素オブジェクトにファイル配列がありません。 このエラーが発生しています。 https://gyazo.com/fe9d29efa7bea44db8445c6003a1f4a0 –

+0

リンクには何も表示されません。 'FileList'は配列を返しません。 – guest271314

+0

https://i.gyazo.com/fe9d29efa7bea44db8445c6003a1f4a0.png –

関連する問題

 関連する問題