Ajax の Fileupload は複数のファイルのアップロードをどのように実装しますか?

今回は、ajax の Fileupload を使用して複数の ファイルのアップロードを実装する方法と、ajax の Fileupload を使用して複数の ファイルのアップロードを実装するための 注意事項 について説明します。以下は実際的なケースです。見てみましょう。

Google を開いて「ajaxFileupload」「複数ファイルのアップロード」を検索すると、似たようなものがたくさん見つかりますが、なぜそれについて書く必要があるのでしょうか?

1 つは、以前のマスターの貢献に感謝の意を表すため、2 つ目は、私自身の知識の要約であり、3 つ目は、オリジナルのものに基づいて変更を加え、他の友人に役立つ可能性があるということです。

このプラグインを使用したことのある人なら誰でも、このプラグインの基本的な使い方を知っています。私はナンセンスな話はせず、コードを直接説明します。

複数のファイルのアップロードを実装する必要があります。以前の方法は、異なる ID で複数の入力を定義し、

for ループ にこのメソッドを配置することでした。次に、インターネットで見つけた、より高度なもので、ソース コードを直接変更しました (作成者が長い間更新していないため、実際には要件を満たしていません)。次に、どのように変更したかを見てみましょう。

オンライン実践の引用:

1. 変更前のコードを見てください

var oldElement = jQuery('#' + fileElementId); 
var newElement = jQuery(oldElement).clone(); 
jQuery(oldElement).attr('id', fileId); 
jQuery(oldElement).before(newElement); 
jQuery(oldElement).appendTo(form);

これは、from に ID の入力を追加するものであることが簡単にわかります。次に、複数のファイルのアップロードを実現するには、次のように変更します。次のようになります:

if(typeof(fileElementId) == 'string'){ 
 fileElementId = [fileElementId]; 
} 
for(var i in fileElementId){ 
 var oldElement = jQuery('#' + fileElementId[i]); 
 var newElement = jQuery(oldElement).clone(); 
 jQuery(oldElement).attr('id', fileId); 
 jQuery(oldElement).before(newElement); 
 jQuery(oldElement).appendTo(form); 
}

この変更の後、初期化コードは次のように記述されます:

$.ajaxFileUpload({ 
 url:'/ajax.php', 
 fileElementId:['id1','id2']//原先是fileElementId:'id' 只能上传一个 
});

この時点で、実際に複数のファイルをアップロードすることは可能ですが、私にとっては、複数の ID、ファイルのアップロードという新しい問題が発生します。私のインターフェース それは固定されておらず、動的にロードされるので、IDを動的に生成する必要があると思います。名前を使用するだけではどうでしょうか。次に、上記のコードを次のように変更します:

if(typeof(fileElementId) == 'string'){ 
   fileElementId = [fileElementId]; 
  } 
  for(var i in fileElementId){ 
   //按name取值 
   var oldElement = jQuery("input[name="+fileElementId[i]+"]"); 
   oldElement.each(function() { 
    var newElement = jQuery($(this)).clone(); 
    jQuery(oldElement).attr('id', fileId); 
    jQuery(oldElement).before(newElement); 
    jQuery(oldElement).appendTo(form); 
   }); 
  }

このように変更すると、複数のファイル グループをアップロードできます。次に、それを適用する方法を見てみましょう。

html:

<p> 
    <img id="loading" src="scripts/ajaxFileUploader/loading.gif" style="display:none;"> 
    
     <table cellpadding="0" cellspacing="0" class="tableForm" id="calculation_model"> 
      <thead> 
      <tr> 
       <th>多组多个文件</th> 
      </tr> 
      </thead> 
      <tbody> 
      <tr> 
       <td>第一组</td> 
       <td>第二组</td> 
      </tr> 
      <tr> 
       <td><input type="file" name="gridDoc" class="input"></td> 
       <td><input type="file" name="caseDoc" class="input"></td> 
      </tr> 
      </tbody> 
      <tfoot> 
      <tr> 
       <td><button class="button" id="up1">Upload</button></td> 
       <td><button class="button" id="addInput" >添加一组</button></td> 
      </tr> 
      </tfoot> 
     </table> 
   </p>

js:

/** 
 * Created with IntelliJ IDEA. 
 * User: Administrator 
 * Date: 13-7-3 
 * Time: 上午9:20 
 * To change this template use File | Settings | File Templates. 
 */ 
$(document).ready(function () { 
 $("#up1").click(function(){ 
  var temp = ["gridDoc","caseDoc"]; 
  ajaxFileUpload(temp); 
 }); 
 
 $("#addInput").click(function(){ 
  addInputFile(); 
 }); 
 
}); 
 
//动态添加一组文件 
function addInputFile(){ 
 $("#calculation_model").append(" <tr>"+ 
  "<td><input type=&#39;file&#39; name=&#39;gridDoc&#39; class=&#39;input&#39;></td> "+ 
  "<td><input type=&#39;file&#39; name=&#39;caseDoc&#39; class=&#39;input&#39;></td> "+ 
  "</tr>"); 
} 
 
 
//直接使用下载下来的文件里的demo代码 
function ajaxFileUpload(id) 
{ 
 //starting setting some animation when the ajax starts and completes 
 $("#loading").ajaxStart(function(){ 
   $(this).show(); 
  }).ajaxComplete(function(){ 
   $(this).hide(); 
  }); 
 
 /* 
  prepareing ajax file upload 
  url: the url of script file handling the uploaded files 
  fileElementId: the file type of input element id and it will be the index of $_FILES Array() 
  dataType: it support json, xml 
  secureuri:use secure protocol 
  success: call back function when the ajax complete 
  error: callback function when the ajax failed 
 
  */ 
 $.ajaxFileUpload({ 
   url:'upload.action', 
   //secureuri:false, 
   fileElementId:id, 
   dataType: 'json' 
  } 
 ) 
 
 return false; 
 
}

struts2 のアップロードは比較的簡単で、合意された名前を宣言するだけで、ファイルのオブジェクトと名前を取得できます。

ここで質問があります。なぜマスターは以前に複数のファイルを変更したのに、バックグラウンドで ID を取得する方法がわかりませんか?バグはありますか？これはまだテストされていません。問題がある場合は、指摘して一緒に学習してください

最後に、私が修正したプラグインを添付します

ajaxfileupload プラグイン

この記事の場合は、オンラインの php 中国語のその他の関連記事に注目してください。

推奨読書:

Ajax + サーブレットによる非リフレッシュドロップダウンリンクの実装 (コード付き)

Ajax を使用してユーザー名が重複しているかどうかを非同期的にチェックする方法

以上がAjax の Fileupload は複数のファイルのアップロードをどのように実装しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。