AjaxFileUpload を使用してファイル アップロード ボックスを動的に追加する方法

今回は、AjaxFileUpload が動的にファイル アップロードボックスを追加する方法と、AjaxFileUpload が動的にファイル アップロード ボックスを追加する際の注意点について説明します。実際のケースを見てみましょう。

しかし、ファイルの数が固定されているだけなので、需要がファイルの数を不明な場合は、柔軟性を実現するためにファイル アップロード ボックスを動的に追加する必要があります。

前回の記事の基本フレームワークをベースに、主に以下の点が変更されています

1. ファイルアップロードボックスの動的追加と削除を行うためのjQuery

2.

3. ajaxfileupload.js で ID 配列を必要な Object 配列に変換します

上記の問題を順番に解決します

1. ファイルアップロードボックスの動的な追加と削除を実現します

   

    多文件上传   

   添加                       

 

<script> 
 //添加附件 
 function addFile(){ 
 var fileLength = $("input[name=file]").length+1; 
 var inputFile = "<p id=&#39;addFile"+fileLength+"&#39;><input type=&#39;file&#39; id=&#39;file"+fileLength+"&#39; name=&#39;file&#39; />" 
   +"<a href=&#39;javascript:void();&#39; onclick=&#39;delFile("+fileLength+");&#39;>删除</script>

";   $("#add").after(inputFile);   }   //删除附件   function delFile(id){   $("#addFile"+id).remove();   } 

2.ファイルアップロードボックスのIDアップロードボックスがいくつあるかわからないので、アップロードボックスが追加されるたびに、そのid属性がfile1、file2の形でインクリメントされます

各ループを使用できます文字を結合するには

var files = ""; 
//获取所有 <input> 的ID属性值 
$("input[name=file]").each(function(){ 
 files = files + $(this).attr("id")+","; 
}) 
//将字符最后一逗号(,)截取掉 
files = files.substring(0,files.length-1);

その後、取得するファイルの値は次のようになります: var files = "file1,file2,file3";

console.info(typeof(files) ); ファイルを文字列型として表示しますvar files = "file1,file2,file3";

可以使用console.info(typeof(files));查看files为string类型

三、ajaxfileupload.js里将ID数组转换为需要的Object数组

因为我们需要的是诸如var files = ['file1','file2','file3'];

而不是var files = "file1,file2,file3";

3 つ目に、ajaxfileupload.js は、ID 配列を必要なオブジェクト配列

に変換します。これは、必要なものが var files = [ のようなものであるためです。 <code>var files = "file1, file2, file3";

の代わりに 'file1','file2','file3'];

したがって、実際には変換する必要があります。 , ajaxfileupload.jsで行う必要はありません

ID取得時に完全に変換してから値を渡すことができます。場所は関係ありません、方法は同じです。

まだ次のコードが見つかります:

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

このコードの上に次のコードを追加します:

var t = ''; 
if(typeof(fileElementId) == 'string'){ 
/* 
 * 将传过来的值 如："file1,file2,file3" 转换为：['file1','file2','file3'] 
 */ 
var s = fileElementId.split(","); 
for(var i in s){ 
 t = t + "'"+s[i]+"'"+","; 
} 
t = "["+t+"]"; 
t = t.replace(",]", "]") 
} 
fileElementId= eval('('+ t +')'); //将string类型转换为Object类型

効果は次のとおりです:

この記事のケースを読んだ後は、この方法を習得したと思います。さらにエキサイティングな内容については、php 中国語 Web サイトに注目してください。その他の関連記事もご覧ください。 推奨読書:

🎜プロジェクトにおける Ajax と jsonp の実践的な概要🎜🎜🎜🎜🎜 AjaxFileUpload を使用して複数のファイルのアップロードを実装する方法🎜🎜🎜

以上がAjaxFileUpload を使用してファイル アップロード ボックスを動的に追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。