jquery_jqueryをベースにした画像アップロードローカルプレビュー機能の実装-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jquery_jqueryをベースにした画像アップロードローカルプレビュー機能の実装

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:20 PM

jquery写真をアップロードする

ファイルをアップロードするときに、プレビューする前に毎回サーバーにアップロードする必要がある場合、ネットワーク速度が遅い場合や画像に問題がある場合は、合理的であるように見えますが、実際には不合理です。顧客の時間を無駄にするだけでなく、サーバーリソースも無駄にします。以下では、js を使用して画像をアップロードするときのローカルプレビューについて説明します。この方法が役立つことを願っています。
1.原則

は 2 つのステップに分かれています:

画像をアップロードするための入力がトリガーされ、ローカル画像が選択されると、アップロードする画像のオブジェクトの URL (オブジェクト URL) を取得します。

あらかじめ記述しておいたimgタグのsrc属性にオブジェクトのURLを代入して画像を表示します。

ここでは、JavaScript の File オブジェクト、Blob オブジェクト、window.URL.createObjectURL() メソッドを理解する必要があります。

1. ファイルオブジェクト

File オブジェクトは、ファイルに関する情報を取得するために使用できます。また、このファイルの内容を読み取るためにも使用できます。通常、File オブジェクトは、ユーザーが入力要素でファイルを選択した後に返される FileList オブジェクトです。ドラッグアンドドロップ操作によって生成された DataTransfer オブジェクトから取得できます。

FileList オブジェクトの取得を見てみましょう:

<script type="text/javascript" src="jquery.js"></script>

<input id="upload" type="file">
<img  src="/static/imghwm/default1.png"  data-src="http://code.jquery.com/jquery-1.8.2.min.js"  class="lazy"  id="preview" alt="jquery_jqueryをベースにした画像アップロードローカルプレビュー機能の実装" >

<script type="text/javascript">
$('#upload').change(function(){
  // 获取FileList的第一个元素
  alert(document.getelementbyid('upload').files[0]);
});
</script>

2. BLOB オブジェクト

Blob オブジェクトは、読み取り専用の生データを含むファイルのようなオブジェクトです。Blob オブジェクト内のデータは、JavaScript のネイティブ形式である必要はありません。File インターフェイスは Blob の機能を継承しています。 BLOB、およびユーザーのコンピューター上のローカルファイルのサポートを拡張します。

File インターフェースは Blob を継承しているため、取得したいオブジェクト URL は実際には Blob オブジェクトから取得されます。 Blob オブジェクトを URL に変換しましょう:

<script type="text/javascript">
var f = document.getelementbyid('upload').files[0];
var src = window.URL.createObjectURL(f);
document.getElementById('preview').src = src;
</script>

比較的完全な例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Upload</title>
<style type="text/css">
    #destination{
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(true,sizingMethod=scale);
    }
</style>

<!--<script type="text/javascript"></script>-->
<script type="text/javascript" src="http://localhost/jQuery/jquery.js"></script>
<script type="text/javascript">
//处理file input加载的图片文件
$(document).ready(function(e) {
 //判断浏览器是否有FileReader接口
 if(typeof FileReader =='undefined')
 {
  $("#destination").css({'background':'none'}).html('亲,您的浏览器还不支持HTML5的FileReader接口,无法使用图片本地预览,请更新浏览器获得最好体验');
 //如果浏览器是ie
 if($.browser.msie===true)
 {
  //ie6直接用file input的value值本地预览
  if($.browser.version==6)
  {
    $("#imgUpload").change(function(event){   
    //ie6下怎么做图片格式判断&#63;
    var src = event.target.value;
    //var src = document.selection.createRange().text; //选中后 selection对象就产生了 这个对象只适合ie
    var img = '<img  src="/static/imghwm/default1.png"  data-src="'+src+'"  class="lazy"+src+'"    style="max-width:90%" height="200px" / alt="jquery_jqueryをベースにした画像アップロードローカルプレビュー機能の実装" >';
    $("#destination").empty().append(img);
   });
  }
  //ie7,8使用滤镜本地预览
  else if($.browser.version==7 || $.browser.version==8)
  {
  $("#imgUpload").change(function(event){
    $(event.target).select();
    var src = document.selection.createRange().text;
    var dom = document.getElementById('destination');
    //使用滤镜 成功率高
    dom.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= src;
    dom.innerHTML = '';
    //使用和ie6相同的方式 设置src为绝对路径的方式 有些图片无法显示 效果没有使用滤镜好
    /*var img = '<img  src="/static/imghwm/default1.png"  data-src="'+src+'"  class="lazy"+src+'"    style="max-width:90%" height="200px" / alt="jquery_jqueryをベースにした画像アップロードローカルプレビュー機能の実装" >';
    $("#destination").empty().append(img);*/
   });
  }
 }
 //如果是不支持FileReader接口的低版本firefox 可以用getAsDataURL接口
 else if($.browser.mozilla===true)
 {
  $("#imgUpload").change(function(event){
  //firefox2.0没有event.target.files这个属性 就像ie6那样使用value值 但是firefox2.0不支持绝对路径嵌入图片 放弃firefox2.0
  //firefox3.0开始具备event.target.files这个属性 并且开始支持getAsDataURL()这个接口 一直到firefox7.0结束 不过以后都可以用HTML5的FileReader接口了
  if(event.target.files)
  {
   //console.log(event.target.files);
   for(var i=0;i<event.target.files.length;i++)
   { 
     var img = '<img  src="/static/imghwm/default1.png"  data-src="'+event.target.files.item(i).getAsDataURL()+'"  class="lazy"+event.target.files.item(i).getAsDataURL()+'"    style="max-width:90%" height="200px"/ alt="jquery_jqueryをベースにした画像アップロードローカルプレビュー機能の実装" >';
    $("#destination").empty().append(img);
   }
  }
  else
  {
   //console.log(event.target.value);
   //$("#imgPreview").attr({'src':event.target.value});
  }
  });
 }
 }
 else
 {
 // version 1
 /*$("#imgUpload").change(function(e){
  var file = e.target.files[0];
  var fReader = new FileReader();
  //console.log(fReader);
  //console.log(file);
  fReader.onload=(function(var_file)
  {
   return function(e)
   {
   $("#imgPreview").attr({'src':e.target.result,'alt':var_file.name});
   }
  })(file);
  fReader.readAsDataURL(file);
  });*/
  
  //单图上传 version 2 
  /*$("#imgUpload").change(function(e){
    var file = e.target.files[0];
    var reader = new FileReader(); 
  reader.onload = function(e){
   //displayImage($('bd'),e.target.result);
   //alert('load');
   $("#imgPreview").attr({'src':e.target.result});
  }
  reader.readAsDataURL(file);
   });*/
  //多图上传 input file控件里指定multiple属性 e.target是dom类型
   $("#imgUpload").change(function(e){ 
    for(var i=0;i<e.target.files.length;i++)
    {
     var file = e.target.files.item(i);
   //允许文件MIME类型 也可以在input标签中指定accept属性
   //console.log(/^image/.*$/i.test(file.type));
   if(!(/^image/.*$/i.test(file.type)))
   {
    continue;  //不是图片 就跳出这一次循环
   }
   
   //实例化FileReader API
   var freader = new FileReader();
   freader.readAsDataURL(file);
   freader.onload=function(e)
   {
    var img = '<img  src="/static/imghwm/default1.png"  data-src="'+e.target.result+'"  class="lazy"+e.target.result+'"    style="max-width:90%" height="200px"/ alt="jquery_jqueryをベースにした画像アップロードローカルプレビュー機能の実装" >';
    $("#destination").empty().append(img);
   }
    }
   });
   
  //处理图片拖拽的代码
  var destDom = document.getElementById('destination');
  destDom.addEventListener('dragover',function(event){
   event.stopPropagation();
   event.preventDefault();
   },false);
   
  destDom.addEventListener('drop',function(event){
   event.stopPropagation();
   event.preventDefault();
   var img_file = event.dataTransfer.files.item(0);  //获取拖拽过来的文件信息 暂时取一个
   //console.log(event.dataTransfer.files.item(0).type);
   if(!(/^image/.*$/.test(img_file.type)))
   {
   alert('您还未拖拽任何图片过来,或者您拖拽的不是图片文件');
   return false;
   }
   fReader = new FileReader();
   fReader.readAsDataURL(img_file);
   fReader.onload = function(event){
   destDom.innerHTML='';
   destDom.innerHTML = '<img  src="/static/imghwm/default1.png"  data-src="'+event.target.result+'"  class="lazy"+event.target.result+'"    style="max-width:90%" height="200px"/ alt="jquery_jqueryをベースにした画像アップロードローカルプレビュー機能の実装" >'; 
   };
  },false);
 }
});
</script>
</head>

<body>
<input type="file" id="imgUpload" name="imgUpload" draggable="true" single/> <!--允许file控件接受的文件类型-->
<!--<input type="file" id="imgUpload" name="imgUpload" accept="image/*" multiple/>-->
<div id="destination" style="width:200px;height:200px;border:1px solid #000000;"><img  src="/static/imghwm/default1.png"  data-src="nopic.jpg"  class="lazy" / alt="jquery_jqueryをベースにした画像アップロードローカルプレビュー機能の実装" ></div>
</body>
</html>

2. 互換性

•上記の方法はChromeブラウザに適しています
•IE ブラウザの場合は、src の代わりに入力値を直接使用できます
• オンラインで情報を表示する場合、File オブジェクトの getAsDataURL() メソッドを直接使用して URL を取得できましたが、このメソッドは getAsText() と getAsBinary() で廃止されました。 ;

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます