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:

XMLHt のセットは、FormData を通じて組み立てることができますtpRequest が送信するオブジェクト要求されたキーと値のペア。フォームとは独立して使用できるため、フォーム データの送信がより柔軟で便利になります。フォームのエンコード タイプを 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 サイトの他の関連記事を参照してください。