最も簡単な例でjQuery画像のインスタントアップロードを実現

75865 ワード
jquery
最近、jQueryがインスタントにアップロードしたプラグインを見て、やっと道がわかりました.その最も核心的な一部を抽出し,最も簡単な例でjQueryピクチャの即時アップロードの原理を説明することを期待する.
まず、この例には3つのファイルが含まれています.
1、パネルHTMLファイルをアップロードする.
2、PHPファイルをアップロード処理する.
3、jQueryライブラリ.
第一に、パネルHTMLファイル(index.html)をアップロードします.
主にjQueryライブラリ、インスタントアップロードに必要なjs、フォーム、iframeフレームワークが含まれています.詳細なコメントが添付されているソースコードを次に示します.
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 2 <html xmlns="http://www.w3.org/1999/xhtml">

 3 <head>

 4     <title>jQuery Upload Image</title>

 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 6     <meta http-equiv="Content-Language" content="zh-CN" />

 7     <!--<script type="text/javascript" src="jquery-1.6.2.min.js"></script>-->    <!--   jquery -->

 8     <script type="text/javascript" src="http://files.cnblogs.com/Zjmainstay/jquery-1.6.2.min.js"></script>

 9 </head>

10 <body>

11 <style>

12     #exec_target{display:none;width:0;height:0;}

13     #feedback{width:1200px;margin:0 auto;}

14     #feedback img{float:left;width:300px;height:300px;}    

15 </style>

16 <script type="text/javascript">

17 $(document).ready(function(){

18     //           

19     $("#upload_file").change(function(){

20         if($("#upload_file").val() != '') $("#submit_form").submit();

21     });

22     //iframe    ，         ，  data null。

23     $("#exec_target").load(function(){

24         var data = $(window.frames['exec_target'].document.body).find("textarea").html();

25         // iframe      ，    feedback 

26         if(data != null){

27             $("#feedback").append(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>'));

28             $("#upload_file").val('');

29         }

30     });

31 });

32 </script>

33 <form id="submit_form" method="post" action="submit_form_process.php" target="exec_target" enctype="multipart/form-data">

34     <input type="file" name="upload_file" id="upload_file">        <!--        -->

35 </form>

36 <iframe id="exec_target" name="exec_target"></iframe>    <!--       iframe   -->

37 <div id="feedback"></div>    <!--          -->

38 </body>

39 </html>

第二に、PHPファイル(submit_form_process.php)をアップロード処理する.
主に画像ファイルの簡単なアップロードと、アップロードしたばかりの画像を格納する画像ラベルを返します.次はそのソースコードです.
1 <?php

2     //header('content-type:text/html charset:utf-8');  /*      ，       IE   HTML     */ 3     //            

4     if(!file_exists($_FILES['upload_file']['name'])) move_uploaded_file($_FILES['upload_file']['tmp_name'],iconv('utf-8','gb2312',$_FILES['upload_file']['name']));

5     //      <img>  

6     echo "<textarea><img src='{$_FILES['upload_file']['name']}'/></textarea>";

7 //End_php

まとめの原理透析:
jQueryのインスタントアップロードといえば、その原理を知らない人の第一のアイデアはAJAX(補足:当時はFormDataの対象があるとは知らなかった)を使うのが一般的で、私も試したことがあります.ただし、アップロードファイルは一般データのPOSTとは異なるため、フォームformのコミットが必要です.したがって、jQueryアップロードプラグインものデータを新しいformに転送してコミットし、フォームのtargetは新しいiframeを指し、iframeでフォームコミット後の処理を行い、完了後iframeは再ロードされ処理結果を含み、iframeのloadイベントを通じて処理結果をキャプチャして取得することができる.元のフォームがあるページ(feedback)に返信し、jQueryのインスタントアップロードの効果を実現します.一方、フォームの提出に際しては、ファイル選択後にフォームを即時に提出するためにinputタグのchangeイベント(index.html L 19-21)を用い、ファイルを選択するとinputの値が変化し、その際にフォームを提出して処理することができる.
パッケージのダウンロード:最も簡単なjQueryインスタントアップロードの例
プレゼンテーションアドレス:jQueryインスタントアップロードデモ
 
/*****************************************************************************************/
@东方翔评论ヒントを受けて、テストしてみました.ajaxのFormDataオブジェクト、そして成功したことを発見(FF、Chromeテスト成功)、へへ~次はソースコード、制御ファイルはsubmit_form_process.phpは変わらない.
特別:contentType:false,processData:false,
この2つのパラメータは必須です.
contentType:false,$_がありませんFILES値が空です.
プロセスデータがありません:false,FFコンソールエラー:“NS_ERROR_XPC_BAD_OP_ON_WN_PROT:Illegal operation on WrappedNative prototype object”,直接実行できません.
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 2 <html xmlns="http://www.w3.org/1999/xhtml">

 3 <head>

 4     <title>FormData</title>

 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 6     <meta http-equiv="Content-Language" content="zh-CN" />

 7     <script type="text/javascript" src="http://files.cnblogs.com/Zjmainstay/jquery-1.6.2.min.js"></script>

 8 </head>

 9 <body>

10 <style>

11     #feedback{width:1200px;margin:0 auto;}

12     #feedback img{float:left;width:300px;height:300px;}

13 </style>

14 <div>

15     <!--            -->

16     <img src="http://f7-preview.awardspace.com/zjmainstay.co.cc/jQueryExample/jquery_upload_image/files/addfile.jpg" onclick="getElementById('inputfile').click()" title="      " alt="      ">

17     <input type="file" name="image" style="opacity:0;filter:alpha(opacity=0);" id="inputfile"/>

18 </div>

19 <div id="feedback"></div>    <!--          -->

20 <script type="text/javascript">

21 $(document).ready(function(){

22     $("#inputfile").change(function(){

23         //  FormData  

24         var data = new FormData();

25         // FormData      

26         //

27         $.each($('#inputfile')[0].files, function(i, file) {

28             data.append('upload_file', file);

29         });

30         $.ajax({

31             url:'submit_form_process.php',

32             type:'POST',

33             data:data,

34             cache: false,

35             contentType: false,    //   

36             processData: false,    //   

37             success:function(data){

38                 data = $(data).html();

39                 if($("#feedback").children('img').length == 0) $("#feedback").append(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>'));

40                 else $("#feedback").children('img').eq(0).before(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>'));

41             }

42         });

43     });

44 });

45 </script>

46 </body>

47 </html>

 
プレゼンテーションアドレス:Ajax FormData発行フォーム
/*********************************************************************************************/
マルチマップアップロードインプリメンテーション(前の2つのバージョンのファイルとは独立):
     1、index.htmlファイル
機能:画像をクリックしてファイルを追加し、複数のファイルを追加し、すぐにファイルをアップロードし、アップロードファイルのフィードバック情報を表示します.
組み込みテクノロジー:
              1)$.ajax
              2)$.ajax送信FormDataオブジェクト
3)input multiple=“multiple”複数ファイルアップロード
4)img onclick=“getElementById('inputfile').click()”画像をクリックしてファイルの追加操作を実現
5)input type="file"スタイル:height:0;width:0;z-index: -1;ファイルの追加ボタンを非表示(Chromeでdisplay:noneを使用するとクリックが無効になります)
ソース:
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 2 <html xmlns="http://www.w3.org/1999/xhtml">

 3 <head>

 4     <title>Easy Ajax FormData Upload Multiple Images</title>

 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 6     <meta http-equiv="Content-Language" content="zh-CN" />

 7     <script type="text/javascript" src="http://files.cnblogs.com/Zjmainstay/jquery-1.6.2.min.js"></script>

 8 </head>

 9 <body>

10 <style>

11     #feedback{width:1200px;margin:0 auto;}

12     #feedback img{float:left;width:300px;height:300px;}

13     #ZjmainstaySignaturePicture,#addpicContainer{float:left;width: 100%;}

14     #addpicContainer{margin-left:5px;}

15     #ZjmainstaySignaturePicture img{width: 535px;}

16     #addpicContainer img{float: left;}

17     .loading{display:none;background:url("http://f7-preview.awardspace.com/zjmainstay.co.cc/jQueryExample/jquery_upload_image/files/ui-anim_basic_16x16.gif") no-repeat scroll 0 0 transparent;float: left;padding:8px;margin:18px 0 0 18px;}

18 </style>

19 <div id="ZjmainstaySignaturePicture"><a href="http://www.cnblogs.com/Zjmainstay"><img src="http://pic002.cnblogs.com/images/2012/383557/2012071311244097.jpg"/></a></div>

20 <div id="addpicContainer">

21     <!--   multiple="multiple"           -->

22     <!-- position: absolute;left: 10px;top: 5px;       input      。-->

23     <!-- height:0;width:0;z-index: -1;     input，  Chrome     display:none，         -->

24     <!-- onclick="getElementById('inputfile').click()"                -->

25     <img onclick="getElementById('inputfile').click()" style="cursor:pointer;border: 1px solid #AABBCC;" title="      " alt="      " src="http://f7-preview.awardspace.com/zjmainstay.co.cc/jQueryExample/jquery_upload_image/files/addfile.jpg">

26     <input type="file" multiple="multiple" id="inputfile" style="height:0;width:0;z-index: -1; position: absolute;left: 10px;top: 5px;"/>

27     <span class="loading"></span>

28 </div>

29 <div id="feedback"></div>    <!--          -->

30 <script type="text/javascript">

31 $(document).ready(function(){

32     //          

33     $("#inputfile").change(function(){

34         //  FormData  

35         var data = new FormData();

36         // FormData      

37         $.each($('#inputfile')[0].files, function(i, file) {

38             data.append('upload_file'+i, file);

39         });

40         $(".loading").show();    //      

41         //    

42         $.ajax({

43             url:'submit_form_process.php',

44             type:'POST',

45             data:data,

46             cache: false,

47             contentType: false,        //     

48             processData: false,        //     

49             success:function(data){

50                 data = $(data).html();

51                 //   feedback    append，    before 1 （ .eq(0).before() ）     。

52                 //data.replace(/&lt;/g,'<').replace(/&gt;/g,'>')   html  ，        。

53                 if($("#feedback").children('img').length == 0) $("#feedback").append(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>'));

54                 else $("#feedback").children('img').eq(0).before(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>'));

55                 $(".loading").hide();    //          

56             },

57             error:function(){

58                 alert('    ');

59                 $(".loading").hide();    //          

60             }

61         });

62     });

63 });

64 </script>

65 </body>

66 </html>

 
    2、submit_form_process.phpバックグラウンド処理ファイル
機能:FormDataに含まれる$FILES配列を処理して画像ファイルをアップロードし、フィードバック情報を返信します.
組み込みテクノロジー:
1)FormDataを$_にコミットFILES後の構造形式
2)iconv('utf-8','gb 2312',$filename)ファイル名のトランスコード処理
             3)preg_match("/^.(jpg|jpeg|gif|png){1}$/i",strrchr($gb_filename,'.'))ファイルタイプフィルタリング
             4)move_uploaded_file()ファイルのアップロード
             5)echo '';フィードバックメッセージを返信します.
ソース:
  
 1 <?php

 2     header('content-type:text/html charset:utf-8');

 3     $dir_base = "./files/";     //       

 4     //        ，     。

 5     if(empty($_FILES)) {

 6         echo "<textarea><img src='{$dir_base}error.jpg'/></textarea>";

 7         exit(0);

 8     }

 9     

10     $output = "<textarea>";

11     $index = 0;        //$_FILES    name     ，   foreach($_FILES as $index=>$file)

12     foreach($_FILES as $file){

13         $upload_file_name = 'upload_file' . $index;        //  index.html FomData      

14         $filename = $_FILES[$upload_file_name]['name'];

15         $gb_filename = iconv('utf-8','gb2312',$filename);    //     gb2312  

16         //        

17         if(!file_exists($dir_base.$gb_filename)) {

18             $isMoved = false;  //      

19             $MAXIMUM_FILESIZE = 1 * 1024 * 1024;     //          1M = 1 * 1024 * 1024 B;

20             $rEFileTypes = "/^\.(jpg|jpeg|gif|png){1}$/i"; 

21             if ($_FILES[$upload_file_name]['size'] <= $MAXIMUM_FILESIZE && 

22                 preg_match($rEFileTypes, strrchr($gb_filename, '.'))) {    

23                 $isMoved = @move_uploaded_file ( $_FILES[$upload_file_name]['tmp_name'], $dir_base.$gb_filename);        //    

24             }

25         }else{

26             $isMoved = true;    //            

27         }

28         if($isMoved){

29             //      <img>  

30             // ：     src    urlencode  ，        ，

31             //        urlencode($gb_filename)   urlencode($filename)，     HTML    src     。

32             $output .= "<img src='{$dir_base}{$filename}' title='{$filename}' alt='{$filename}'/>";

33         }else {

34             $output .= "<img src='{$dir_base}error.jpg' title='{$filename}' alt='{$filename}'/>";

35         }

36         

37         $index++;

38     }

39     

40     echo $output."</textarea>";

41     

42 //End_php

 
パッケージのダウンロード:PHP jQueryマルチマップアップロード実装ソースファイル
プレゼンテーションアドレス:PHP jQueryマルチマップアップロードデモ
 
添付:マルチマップアップロード版の強化は、『続《最も簡単な例でjQueryピクチャーの即時のアップロードを実現します》の多図のアップロードの実現』を参照してください.
技術英語 > but they have [adverse effects]. / counter effect / by‐product
python 3 azureADにログインしazure graph apiを呼び出す