L'entrée de fichier de téléchargement de fichiers bootstrap est un bon contrôle de téléchargement de fichiers, mais il n'y a pas beaucoup de cas dans la recherche et l'utilisation. Lorsque vous l'utilisez, vous traversez également la rivière en touchant la pierre étape par étape. Ce contrôle est présenté sur l'interface, et le uploady que j'ai utilisé auparavant est plus beau et a des fonctions plus puissantes. Cet article est principalement basé sur mon propre cas de code Framework, introduisant l'utilisation de l'entrée de fichier, le plug-in de téléchargement de fichiers.
1. Introduction à la saisie de fichiers pour le plugin de téléchargement de fichiers
L'adresse de la page d'accueil de ce plug-in est: http://plugins.krajee.com/file-input. Vous pouvez voir beaucoup d'affichages de code de démonstration d'ici: http://plugins.krajee.com/file-basic-usage-demo.
Il s'agit d'un contrôle d'entrée de fichier HTML5 amélioré, d'une extension de Bootstrap 3.x, d'implémentation de prévisualisation de téléchargement de fichiers, de téléchargement multi-fichiers et d'autres fonctions.
D'une manière générale, nous devons introduire les deux fichiers suivants pour que le plug-in soit utilisé normalement:
bootstrap-fileinput / css / fileinput.min.css
Bootstrap-FileInput / JS / FileInput.min.js
L'effet d'interface simple est le suivant. Comme de nombreux commandes de fichiers télécharger, il peut accepter différents types de fichiers. Bien sûr, nous pouvons également spécifier le type de fichier spécifique et d'autres fonctions acceptées.
Si la culture chinoise doit être prise en compte, les documents doivent être introduits:
bootstrap-fileinput / js / fileinput_locale_zh.js
De cette façon, sur la base de la collection Bundles de MVC, nous pouvons ajouter les fichiers dont ils ont besoin à la collection.
// Ajouter la prise en charge de Bootstrap-FileInput Control CSS_Meteronic.include ("~ / Content / MyPlugins / Bootstrap-FileInput / CSS / FileInput.min.css"); js_meteronic.include ("~ / contenu / myplugins / bootstrap-fileinput / js / fileinput.min.js"); js_meteronic.include ("~ / contenu / myplugins / bootstrap-fileinput / js / fileinput_locale_zh.js"); js_meteronic.include ("~ / contenu / myplugins / bootstrap-fileinput / js / fileinput_locale_zh.js");De cette façon, nous pouvons présenter la description et les invites de l'interface chinoise sur la page, comme indiqué dans l'interface suivante.
2. Utilisation de l'entrée de fichier pour le téléchargement de fichiers
D'une manière générale, nous pouvons définir une fonction JS générale pour initialiser ce contrôle de plug-in, comme indiqué dans le code de fonction JS suivant.
// Initialisez la fonction FileInput (première initialisation) Fonction InitFileInput (ctrlName, uploadUrl) {var contrôle = $ ('#' + ctrlName); Control.FileInput ({Language: 'Zh', // Définissez la langue UploadUrl: uploadUrl, // Adresse téléchargée autorisée ALLERDFILEExtensions: ['jpg', 'png', 'Gift'], // Reçu Fichier Exposition Showupload: FALT Style PreviewFileIcon: "<i class = 'Glyphicon Glyphicon-King'> </i>",});}Dans le code de la page, nous placons un contrôle de téléchargement de fichiers, comme indiqué dans le code suivant.
<div style = "height: 500px"> <input id = "file-pertrait1" type = "file"> </div>
De cette façon, le code d'initialisation de notre code de script est le suivant:
Cette
Cela complète l'initialisation du contrôle. Si nous avons besoin de télécharger un fichier, nous avons également besoin de code JS pour gérer les événements téléchargés par le client, et avons également besoin du contrôleur d'arrière-plan MVC pour gérer l'opération d'enregistrement de fichier.
Par exemple, mon code pour enregistrer les données du formulaire est le suivant.
// Ajouter un enregistrement FormValidate ("FFADD", fonction (formulaire) {$ ("# add"). Modal ("Hide"); // Envoyer des paramètres de construction à l'arrière {// Ajouter un traitement de téléchargement de portraits InitPortrait (data.data1); }}). Error (function () {showtips ("Vous n'êtes pas autorisé à utiliser cette fonction, veuillez contacter l'administrateur pour le gérer.");});}); });Parmi eux, nous avons remarqué la partie du code logique de traitement de la sauvegarde du fichier:
// Ajouter le traitement de téléchargement de Portrait InitPortrait (data.data1); // Utilisez l'ID écrit pour mettre à jour $ ('# file-Portrait'). FileInput ('upload');La première ligne de code consiste à reconstruire le contenu supplémentaire téléchargé, tel que les informations d'identification de l'utilisateur, afin que nous puissions créer des données supplémentaires en fonction de ces ID pour le téléchargement et le traitement pour l'arrière-plan.
Cette fonction réaffecte principalement l'ID pour faciliter l'acquisition des derniers paramètres supplémentaires lors du téléchargement. C'est la même chose que le mode de traitement Uploadify.
// Initialiser la fonction d'information de l'image initportrait (ctrlName, id) {var contrôle = $ ('#' + ctrlName); var imageurl = '/ picturealbum / getportrait? id =' + id + '& r =' + math.random (); // IMPORTANT, il est nécessaire de mettre à jour le contenu de paramètre supplémentaire du contrôle et l'affichage d'initialisation de l'image Control.FileInput ('Refresh', {UpLoadextradata: {id: id}, InitialPreview: [// prévisualiser les paramètres de l'image "<img src = '' + ImageUrl +" 'class =' file-preview-image 'alt =' portrait. }); }Comme nous l'avons vu plus tôt, l'adresse que j'ai téléchargée est: "/ utilisateur / editportrait". Je vais également annoncer cette fonction d'arrière-plan, dans l'espoir de vous donner un code de cas complet à apprendre.
/// <summary> /// Upload Uservatar Image /// </summary> /// <param name = "ID"> L'ID de l'utilisateur </param> /// <retourne> </ returns> public ActionResult EditPortrait (int id) {CommonResult Result = new CommunResult (); essayez {var files = request.files; if (files! = null && files.Count> 0) {userInfo info = bllfactory <User> .Instance.FindById (id); if (info! = null) {var filedata = readFileBytes (fichiers [0]); result.success = bllfactory <User> .instance.updatePersonImageBytes (userImageType.personportrait, id, filedata); }}} catch (exception ex) {result.errorMessage = ex.Message; } return tojsonContent (result); }De cette façon, nous avons construit la logique de sauvegarde et de traitement des portraits utilisateur ci-dessus, et les fichiers peuvent être enregistrés normalement dans le système de fichiers d'arrière-plan, et en même temps, certaines informations nécessaires sont enregistrées dans la base de données.
Bien sûr, en plus de l'utiliser pour traiter les images de portraits des utilisateurs, nous pouvons également l'utiliser pour créer des opérations de traitement d'album d'image. L'interface spécifique est la suivante.
Le code d'initialisation de cette pièce est le suivant:
// Initialisez le contrôle FileInput (première initialisation) $ ('# file-Portrait'). FileInput ({langage: 'zh', // Définit le langage uploadurl: "/ fileupload / upload", // upload adresse autorisée 'multipart / form-data', showupload: true, // Le bouton de téléchargement est-il showcaption: false, // le titre de navigateur BrowserSclass: "btn btn-primary", // bouton Style PreviewFileIcon: "<i class = 'Glyphicon Glyphicon-King'> </i>", msgFileStoomy dépasse la valeur maximale autorisée {m}! ",});Ce qui précède est l'explication détaillée de l'expérience du framework de développement métronique de bootstrap qui vous est présenté par l'éditeur [cinq] L'utilisation du plug-in de téléchargement de fichiers d'entrée de fichier bootstrap est expliquée en détail. J'espère que ce sera utile à tout le monde. Si vous souhaitez en savoir plus d'informations, veuillez faire attention au site Web Wulin.com!