ローカル画像プレビューを実装するための純粋な JS メソッド

ローカル画像プレビューを実装するための純粋な JS メソッド_JavaScript スキル

WBOY

リリース： 2016-05-16 15:47:56

オリジナル

982 人が閲覧しました

この記事の例では、純粋な JS を使用してローカル画像プレビューを実装する方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。

ふと、インターネット上に似たようなコードがたくさんあることに気づきましたが、適切なものが見つかりませんでした。以前書いたものを元に書きました。コードは比較的簡潔で、以前に作成した JS を参照しています。メソッドは分離して個別に使用できます。あまり互換性があるかどうかはテストされていません。基本的にすべてのネイティブブラウザー (IE、FF、Chrome) がサポートしています

index.html は次のとおりです:

<html>
<head>
<title>Test</title>
<script type="text/javascript" src="js/z.js"></script>
</head>
<body>
<center>
  <img id="img" src="" /><p />
  <input type="file" id="file" />
</center>
<script>
  z.plimg(z.$('file'),z.$('img'),function(file,img,url){
    alert(url);
  });
</script>
</body>
</html>

ログイン後にコピー

z.js ここをクリックこのサイトからダウンロード。

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。