Maison > Article > interface Web > Comment ajouter dynamiquement une boîte de téléchargement de fichiers avec AjaxFileUpload
Comment ajouter dynamiquement une boîte de téléchargement de fichiers avec AjaxFileUpload
- php中世界最好的语言original
- 2018-03-31 09:33:411721parcourir
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>
<script type="text/javascript">
//添加附件
function addFile(){
var fileLength = $("input[name=file]").length+1;
var inputFile = "<p id='addFile"+fileLength+"'><input type='file' id='file"+fileLength+"' name='file' />"
+"<a href='javascript:void();' onclick='delFile("+fileLength+");'>删除</a></p>";
$("#add").after(inputFile);
}
//删除附件
function delFile(id){
$("#addFile"+id).remove();
}
</script>
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);
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);
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类型
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!