ローカル写真をアップロードする前にプレビューコード例を実装するための HTML5 と jQuery

HTML5 と jQuery はアップロード前にローカル画像のプレビューを実装しており、その効果は次のようになります。
写真の前のページを選択してください:

這里寫圖片描述

画像を選択した後の効果のプレビュー:

這里寫圖片描述

以下はコードです（最も単純な実装コードであり、CSS スタイルはコピーされていないため、好きなように操作できます）

<!DOCTYPE html> 
<html> 
<ヘッド> 
<title>HTML5 アップロードされた画像のプレビュー</title> 
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=UTF-8"> 
<script src="https://www.jb51.net/ajaxjs/jquery-1.6.2.min.js"></script> 
</head> 
<本文> 

 ...

 <フォーム名="form0" id="form0" > 
 <!-- ここで multiple="multiple" について特に言及します。これを追加すると、一度に複数のファイルをアップロードできます。これは HTML5 の新しい属性です --> 
 <input type="file" name="file0" id="file0" multiple="multiple" /><br><img src="" id="img0" > 
 </フォーム> 

 ...

<スクリプト> 
 $("#file0").change(関数(){ 
  // getObjectURL はカスタム関数です。下記を参照してください // this.files[0] は最初に選択されたファイル リソースを表します。上記で multiple="multiple" と記述されているため、アップロードされたファイルが複数ある可能性がありますが、ここでは最初のファイルのみが読み取られます var objUrl = getObjectURL(this.files[0]); 
  // このコードは効果がありません。削除できます // console.log("objUrl = "+objUrl); 
  （オブジェクトURL）の場合{ 
  // ここで画像のアドレス属性を変更します $("#img0").attr("src", objUrl); 
  } 
 }); 
 //ファイルにアクセスできるURLを作成する 
 関数 getObjectURL(ファイル) { 
  var url = null ; 
  // 以下の関数は同じ効果を持ちますが、異なるブラウザでは異なるjs関数を実行する必要があります。if (window.createObjectURL!=undefined) { // 基本 
  url = window.createObjectURL(ファイル); 
  } そうでない場合 (window.URL!=undefined) { // mozilla(firefox) 
  url = window.URL.createObjectURL(ファイル); 
  } else if (window.webkitURL!=undefined) { // webkit または chrome 
  url = window.webkitURL.createObjectURL(ファイル); 
  } 
  URLを返します。 
 } 
</スクリプト> 
</本文> 
</html>

html5 と jQuery を使用してアップロード前にローカル画像をプレビューする方法のサンプルコードに関するこの記事はこれで終わりです。html5 と jQuery を使用してアップロード前にローカル画像をプレビューする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: