Récemment, j'écris mon propre site Web personnel, le framework bootstrap utilisé sur le frontal. Lorsque j'ai atteint la fonction de téléchargement des images, j'ai trouvé un plug-in à usage d'image basé sur l'image basé sur Bootstrap sur Internet. Ce plug-in est très cohérent avec ma vue esthétique, donc j'enregistre brièvement l'utilisation de ce plug-in.
Tout d'abord, introduisez des fichiers CSS et JS plugin en fonction de votre chemin de projet
Notez que les fichiers linguistiques de paramètres sont introduits après fichier fileinput.min.js
<! - Fichier Entrée -> <link href = "../../ css / fileInput.min.css" rel = "Stylesheet"> <script src = "../../ js / fileInput.min.js"> </ script> <script src = "../../ js / locales / zh.js" type = "text / javascript"> </ script> "
Ensuite, il y a le code HTML parce que je ne suis pas un frontal professionnel, donc le code frontal est très mauvais et giclé légèrement et frappe
<! - Modal Box (modal) -> <span style = "white-espace: pre"> </span> <div id = "mymodal" tabindex = "- 1" role = "dialog" aria-labelledby = "mymodallabel" aria-hidden = "true"> <span style = "white-space: pre"> </pany> <v> <pany style = "white-space: pre"> <pander> <v> <pany style = "white-space: pre"> <pander> <div> <pany style = "white-space: pre"> <pander> <v> <pany style = "white-space: pre"> <pander> <v> <pany style = "white-space: pre"> <pander> <v> <pan Span Style = "White-Space: pre"> </span> <div> <span style = "White-Space: Pre"> </span> <v> <span style = "White-Space: Pre"> </span> <div> <span style = "White-Space: Pre"> </span> <Button Type = "Button" Data-Dismiss = "Modal" Aria-Hidden = "True"> <Span Style = "White-Space: PRE"> <pander> Spandi style = "White-Space: pre"> </ span> </ bouton> <span style = "White-espace: pre"> </span> <h3 id = "Mymodallabel" align = "Center"> <span style = "White-Space: Pre"> </span> <b> Informations de score musical ajoutées </b> <span style = "White-Space: Pre"> </pan> </h3> </span> </div> <span style = "White-Space: pre"> </span> <div> <span style = "White-Space: pre"> </ span> <form id = "addform" role = "form" enctype = "multipart / form-data"> <span style = "White-Space: pre"> </span> <v> <spany style = "White-Space: Pre"> </ spanner> score <score <scaire <spanne Style = "White-Space: pre"> </ span> <span style = "White-Space: pre"> </span> <input type = "text" id = "scoreName" name = "scoreName" placeholder = ""> <span style = "White-espace: pre"> </ span> </ div> <span style = "white-space: pre"> </pande> <div style = "Affichage: Inline-Table; margin-tops: 10px:" <span style = "White-espace: pre"> </span> <span style = "White-Space: pre"> </span> <span> type de score </span> <span style = "White-espace: pre"> </span> <span style = "White-espace: pre"> </span> <span style = "White-space: pre"> </space> <pan style = "White-espace: pre"> </ spann </span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> </div> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <div style="display: inline-table; margin-top: 10px;margin-left: 90px; "> <span style =" White-Space: pre "> </span> <span style =" White-Space: pre "> </span> <span style =" White-Space: Pre "> </span> <span style =" White-espace: pre "> </span> <entrée type =" Text "id =" difficulté "name =" Moyenneux "> <span style =" White-Space: Pre "> </ Spany> <pany Style = "White-Space: pre"> </ span> </ div> <span style = "White-espace: pre"> </span> <div style = "margin-top: 10px;"> <span style = "white-space: pre"> </ span> <span style = "white-space: pre"> </ spas style = "White-Space: pre"> </ span> <entrée type = "text" id = "tin" name = "Tune"> <span style = "white-space: pre"> </ span> </ div> <span style = "white-space: pre"> </span> <v> <span style = "White-space: pre"> </span> <entrée id = "fileup" type = "file" /> <spany style = "whitepace: <panp: <panp" </div> <span style = "White-Space: pre"> </span> </ form> <span style = "White-Space: Pre"> </ span> </div> <span style = "White-Space: Pre"> </ span> </div> <span style = "White-Space: Pre"> </ span> "Button" Button " Data-Dismiss = "MODAL"> CLOLER <Span Style = "White-Space: Pre"> </ Span> </ Button> <Span Style = "White-Space: Pre"> </ Span> <! - <Span Style = "White-Space: Pre"> </ Span> <! /.modal-content -> <span style = "white-espace: pre"> </span> </div> <! - /.modal -> <span style = "white-space: pre"> </span> </div>
Ensuite, le code JS initialise l'entrée de fichier
// 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 AdmisFileExtensions: ['JPG', 'Png', 'Gift'], // Reçu Fichier Exposition Showupload: TRUE, // Le bouton upload est-il présenté "BTN BTN", est-ce que le Titre BrowserClasse Style PreviewFileIcon: "<i class = 'Glyphicon Glyphicon-King'> </i>", uploadasync: false, upLoadextradata: function (aperviewId, index) {var obj = {}; $ (this) .val (); obj [id] = val;}); } // Initialize FileInput initFileInput ("FileUp", http: // localhost: 8080 / web / guita / addguitainfo.action);Ce code est le cœur du plugin
uploadurl est le chemin d'accès donné par l'arrière-plan
Ceci est un paragraphe spécial ici
UpLoadexTradata: Function (PreviewId, index) {var obj = {}; $ ('# addform'). Rechercher ('entrée'). Chaque (fonction () {var id = $ (this) .attr ('id'), val = $ (this) .val (); obj [id] = val;}); retour obj; }Ce code Uploadextradata convient pour passer des paramètres supplémentaires qui peuvent être utilisés pour soumettre des formulaires de formulaire pour d'autres données de boîte d'entrée.
UpLoadextradata: {Type: "Type", Tune: "Tune"}Généralement, les données statiques peuvent être directement reçues comme indiqué dans la figure ci-dessus. Cependant, si vous l'écrivez comme ceci, vous n'obtiendrez pas de données dynamiques. Les données ne seront générées qu'une seule fois lors de l'initialisation et ne changeront pas.
Je suis confus à propos de ce problème depuis beaucoup de temps. Enfin, j'ai lu les discussions d'amis étrangers sur GIT, puis je me réfère à l'API pour le résoudre.
Après les avoir écrits, vous pouvez voir les rendus
Le style est encore très bon. Cliquez pour les télécharger et les données complètes de la part de l'arrière-plan seront soumises à l'arrière-plan.
De nombreuses applications de plug-in que j'ai trouvées en ligne sont intégrées à PHP. Je l'ai écrit en Java. Ici, je suis également allé au code reçu en arrière-plan. SpringMVC Framework est très pratique pour recevoir des données.
De cette façon, les paramètres de données et les paramètres d'image sont passés, et l'arrière-plan appelle le code téléchargé par le fichier pour enregistrer l'image
Il existe de nombreux usages qui valent la peine d'être étudiés pour ce plug-in. Ici, je parle brièvement de la façon de l'utiliser et de terminer la transmission de données dynamiques. Les amis qui viennent d'entrer en contact avec ce plug-in peuvent faire une brève référence.
J'ai tellement introduit la méthode de téléchargement de Bootstrap de télécharger des images à l'aide du plug-in de fichiers. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!