Maison > interface Web > Tutoriel Layui > Comment obtenir le nom du fichier dans la fonction de téléchargement de fichiers de Layui

Comment obtenir le nom du fichier dans la fonction de téléchargement de fichiers de Layui

爱喝马黛茶的安东尼
Libérer: 2019-07-11 10:17:09
original
11275 Les gens l'ont consulté

Comment obtenir le nom du fichier dans la fonction de téléchargement de fichiers de Layui

La première étape consiste à ouvrir le logiciel sur notre ordinateur, à créer une nouvelle page html et à ajouter le fichier css, js et jquery.js du plug-in layui, comme montré dans la figure ci-dessous :

Comment obtenir le nom du fichier dans la fonction de téléchargement de fichiers de Layui

La deuxième étape consiste à introduire d'abord les trois fichiers layui.css, layui.js et jquery-1.9.0.js dans le nouveau créé index1.htmlFichier, comme le montre la figure ci-dessous:

Comment obtenir le nom du fichier dans la fonction de téléchargement de fichiers de Layui

La troisième étape consiste à ajouter un tableau, une sélection de fichiers et des boutons de téléchargement de fichiers dans le corps de index1.html pour télécharger le fichier sur le serveur sous forme de tableau Afficher sur l'interface, afficher le nom du fichier, la taille du fichier, etc., comme indiqué ci-dessous :

Comment obtenir le nom du fichier dans la fonction de téléchargement de fichiers de Layui

Le quatrième L'étape consiste à ouvrir la page dans le navigateur et vous pouvez voir la liste de téléchargement de fichiers. L'effet d'interface est le suivant :

Comment obtenir le nom du fichier dans la fonction de téléchargement de fichiers de Layui

Recommandations associées : "framework layui. tutoriel"

La cinquième étape consiste à commencer à donner des fichiers. Ajoutez des événements au bouton de sélection et au bouton de téléchargement, et renvoyez les informations du fichier téléchargé dans la table. Utilisez la fonction obj.preview(function(index, file , result){}); méthode pour lire les informations du fichier local sélectionné et obtenir file.name Nom du fichier, (file.size/1014).toFixed(1) obtient la taille du fichier, comme indiqué dans la figure ci-dessous :

Comment obtenir le nom du fichier dans la fonction de téléchargement de fichiers de Layui

Étape 6 Cliquez sur le bouton de téléchargement de fichier pour télécharger la sélection. Une fois le fichier téléchargé avec succès, les informations de téléchargement du fichier, y compris le nom du fichier, la taille du fichier, etc., sont obtenues via la variable tr=demoListView.find('tr#upload-'+ index), tds =tr.children(); code et inséré dans le tableau, comme indiqué dans la figure ci-dessous :

Comment obtenir le nom du fichier dans la fonction de téléchargement de fichiers de Layui

Dans la septième étape, nous ouvrons le fichier index1.html dans le navigateur et vous pouvez voir le style d'interface pour télécharger plusieurs fichiers, cliquez pour sélectionner plusieurs fichiers, comme suit Comme indiqué dans l'image :

Comment obtenir le nom du fichier dans la fonction de téléchargement de fichiers de Layui

Dans la huitième étape, nous sélectionnons le fichier local à télécharger et cliquons pour l'ouvrir, comme le montre l'image ci-dessous :

Comment obtenir le nom du fichier dans la fonction de téléchargement de fichiers de Layui

À la neuvième étape, vous pouvez voir que le fichier a été téléchargé avec succès sur le serveur, et le nom et la taille du fichier sont obtenus et affichés dans le tableau, comme indiqué ci-dessous :

Comment obtenir le nom du fichier dans la fonction de téléchargement de fichiers de Layui

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal