AjaxFileUpload を使用してファイルアップロードボックスを動的に追加する方法-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-03-31 09:33:41

オリジナル

1719 人が閲覧しました

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

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

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

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

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

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

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

<body> 
 <form action="" enctype="multipart/form-data"> 
 <h2> 
  多文件上传 
 </h2> 
 <input type="file" id="file1" name="file" /><a id="add" href="javascript:void();" rel="external nofollow" onclick="addFile();">添加</a> 
 <span> 
  <table id="down"> 
  </table> 
 </span> 
 </br> 
 <input type="button" onclick="fileUpload();" value="上传"> 
 </form> 
</body>

ログイン後にコピー

<script type="text/javascript"> 
 //添加附件 
 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;>删除</a></p>"; 
 $("#add").after(inputFile); 
 } 
 //删除附件 
 function delFile(id){ 
 $("#addFile"+id).remove(); 
 } 
</script>

ログイン後にコピー

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

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

var files = ""; 
//获取所有 <input type="file" id="file1" name="file" /> 的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 サイトの他の関連記事を参照してください。