Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptにアップロードする前に画像をプレビューするにはどうすればよいですか？

画像をアップロードするには、JavaScriptでFileReader（）を使用します。以下はJavaScriptコードです-

例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<form runat="server">
<input type='file' id="yourImage" />
<img id="chooseImage" src="#" alt="image" />
</form>
<script>
   function readImage(fileInput) {
      if (fileInput.files && fileInput.files[0]) {
         var takingInputFile = new FileReader();
         takingInputFile.onload = function(event) {
            $('#chooseImage').attr('src', event.target.result);
         }
         takingInputFile.readAsDataURL(fileInput.files[0]);
      }
   }
   $("#yourImage").change(function() {
      readImage(this);
   });
</script>
</body>
</html>

上記のプログラムを実行するには、ファイル名 anyName.html（index.html）を保存します ファイルを右クリックして、[VSでライブサーバーで開く]オプションを選択します。 コードエディタ。

出力

JavaScriptにアップロードする前に画像をプレビューするにはどうすればよいですか？


  1. HTMLで画像をレスポンシブにする方法は？

    画像をレスポンシブにするには、2つのプロパティを設定する必要があります。 タグを使用して画像を追加し、高さと最大幅のCSSスタイルを追加して応答性を高めます。たとえば、 style =height：auto; max-width：100％; 次のコードを実行して、画像をHTMLでレスポンシブにすることができます- 注 −画像の応答性を確認するには、ブラウザタブのサイズを変更します。画像のサイズが正しく変更されている場合は、レスポンシブであることを意味します。 例 <!DOCTYPE html> <html>    <head>

  2. HTMLで画像をリンクとして使用するにはどうすればよいですか？

    HTMLで画像をリンクとして使用するには、タグとhref属性を持つタグを使用します。 タグは、Webページで画像を使用するためのものであり、タグは、リンクを追加するためのものです。 image tag src属性の下に、画像のURLを追加します。それで、高さと幅も追加します。 例 次のコードを実行して、画像をHTMLのリンクとして使用することができます <!DOCTYPE html> <html>    <head>       <title>HTML Image as link<