Comment ajouter dynamiquement une boîte de téléchargement de fichiers avec AjaxFileUpload-js tutoriel-php.cn

Comment ajouter dynamiquement une boîte de téléchargement de fichiers avec AjaxFileUpload

php中世界最好的语言

Libérer： 2018-03-31 09:33:41

original

1719 Les gens l'ont consulté

Cette fois, je vais vous montrer comment ajouter dynamiquement une boîte de téléchargement de fichiers avec AjaxFileUpload Quelles sont les précautions pour qu'AjaxFileUpload ajoute dynamiquement une boîte de téléchargement de fichiers. cas. Jetons un coup d'oeil une fois.

Mais il n'y a qu'un nombre fixe de fichiers. Si la demande ne sait pas exactement combien de fichiers il y a, alors nous devons ajouter dynamiquement une boîte de téléchargement de fichiers pour obtenir de la flexibilité.

Basé sur le cadre de base de l'article précédent, le cadre de base reste inchangé. Les aspects suivants sont principalement modifiés :

1. boîtes de téléchargement de fichiers

2. Obtenez l'ID de la boîte de téléchargement de fichiers

3. Convertissez le tableau ID en tableau d'objets requis dans ajaxfileupload.js

Résolvez les problèmes ci-dessus dans l'ordre

1. Implémenter l'ajout et la suppression dynamiques des boîtes de téléchargement de fichiers

<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>

Copier après la connexion

<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>

Copier après la connexion

2. . Obtenez l'ID de la boîte de téléchargement de fichiers

Comme nous ne savons pas combien il y a de boîtes de téléchargement, chaque fois que nous ajoutons une boîte de téléchargement, son attribut id sera incrémenté dans le fichier. forme de fichier1 et fichier2

Vous pouvez utiliser chaque boucle pour épisser des caractères

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);

Copier après la connexion

Ensuite, nous obtenons la valeur des fichiers telle que : var files = "file1,file2,file3";

Vous pouvez utiliser console.info(typeof(files)); pour afficher les fichiers sous forme de chaîne

3. Ajaxfileupload.js Le tableau ID est converti en tableau d'objets requis

car nous avons besoin de quelque chose comme var files = ['file1','file2','file3'];

au lieu de var files = "file1,file2,file3";

nous devons donc le convertir, en fait, il n'est pas nécessaire d'effectuer l'opération dans ajaxfileupload.js

Vous pouvez le convertir lors de l'obtention de l'ID, puis transmettre la valeur. Peu importe où il se trouve, la méthode est la même.

Trouvez toujours le code suivant :

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

Copier après la connexion

Ajoutez ce qui suit en plus de ce code :

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类型

Copier après la connexion

L'effet est tel qu'indiqué :

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Un résumé pratique d'Ajax et de jsonp dans le projet

Comment utiliser AjaxFileUpload pour implémenter plusieurs téléchargements de fichiers

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!