更新不要のアップロードを実現するJavaScriptプレビュー画像機能

この記事では、JavaScript を使用して、更新せずにプレビュー画像をアップロードする簡単な機能を実装する方法を紹介します。

この記事では、FormData と FileReader の 2 つを使用します。

FileReaderは画像閲覧に使用します。

FormData は ajax リクエストに使用されます。

html コード

まず、フォームと画像のコンテナを作成する必要があります。

  <form enctype="multipart/form-data" id="oForm">
    <input type="file" name="file" id="file" onchange="readAsDataURL()" />
    <input type="button" value="提交" onclick="doUpload()" />
  </form>
  <p>
    <img alt="" id="img"/>
  </p>

javascript コード

FormData:

FormData オブジェクトを使用して、XMLHttpRequest を使用してリクエストを送信するためのキーと値のペアのセットを組み立てることができます。フォームのエンコード タイプが multipart/form-data に設定されている場合、FormData を通じて送信されるデータ形式は、フォームから submit() メソッドを通じて送信されるデータ形式と同じです。

ここで、FormData オブジェクトはフォーム内のすべての入力データを取得し、ajax リクエストを使用して指定された URL にデータを送信します。これにより、フォームの送信時にジャンプが発生しません。

  function doUpload() { 
     var formData = new FormData($( "#oForm" )[0]); 
     console.log(formData); 
     $.ajax({ 
       url: 'pp', 
       type: 'POST', 
       data: formData, 
       async: false, 
       cache: false, 
       contentType: false, 
       processData: false, 
       success: function (returndata) { 
         console.log(returndata); 
       }, 
       error: function (returndata) { 
         console.log(returndata); 
       } 
     }); 
  }

FileReader:

FileReader オブジェクトを使用すると、Web アプリケーションは、指定する File または Blob オブジェクトを使用して、ユーザーのコンピューターに保存されているファイル (または生データ バッファー) の内容を非同期的に読み取ることができます。ファイルまたはデータを読み取るもの。

ここでの FileReader オブジェクトは、ファイルから画像を取得し、その画像をデータ URL フォームに変換して、事前に作成されたコンテナーに表示するために使用されます。

以上が更新不要のアップロードを実現するJavaScriptプレビュー画像機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。