Si vous ne connaissez pas la configuration de Bootstrap-FileInput, vous pouvez consulter le site officiel: http://plugins.krajee.com/file-input.
Description logique: Obtenez d'abord l'affichage des données à partir de l'arrière-plan, puis modifiez-les.
Sans plus tarder, téléchargez simplement le code.
1. Partie du code de la page:
<div> <étiquette pour = "inputEmail3"> Project Logo </ Label> <div> <input id = "testlogo" type = "file" name = "iCoFile" /> <input type = "text" name = "htestlogo" id = "htestlogo" onchange = "addFile (this)"> </ div> </div> "
Remarque: où onChange () est requis par mon entreprise, et un événement d'addition sera automatiquement exécuté une fois le téléchargement terminé. Cette méthode peut être supprimée.
2. Obtenez la méthode des données d'initialisation:
// initialiser pour obtenir le fichier d'origine $ (function () {$ .ajax ({type: "post", url: "/eim/project/testfileupload.do", dataType: "json", succès: fonction (data) {coucheer.msg ('' errorthrown) {couchers.msg ('Opération a échoué!');}});Description: Ici, je renvoie un tableau d'objets: Liste <medemberUser>, qui peut être compris comme pour obtenir tous les élèves dans une classe et afficher des avatars
3. Initialisez le composant Bootstrap-FileInput:
fonction showphotos (djson) {// renvoie la chaîne JSON à un objet JSON dans l'arrière-plan var redata = eval (djson); // Aperçu de l'image JSON Data Group var Prelist = new Array (); pour (var i = 0; i <redata.length; i ++) {var array_element = redata [i]; // Nous faisons ici référence au jugement pour .txt, et nous ajoutez le reste si (array_element.fileidfile.name.indexof ("txt")> 0) {// Affichage des types de non-image prélist [i] = "<div class = 'file-preview-frame'> <div class = 'file-preview-other'> <span class = 'file-icon-4x'> <i class = fewer '> <span class =' file-icon-4x '> <i class = fewer'> <span class = 'file-icon-4x'> <i class = fewing = Fa-Fa- File-icon-4x '> <i class = Fawe fa-file-text-o text-info '> </i> </ span> </ div> </ div> "} else {// Type d'image Prelist [i] =" <img src = / "/ eim / upload / getImg.do? class = / "file-preview-image /"> "; }} var préviewjson = prelist; // Config Data correspondant au groupe de données JSON de l'image d'aperçu ci-dessus var préconfiglist = new Array (); pour (var i = 0; i <redata.length; i ++) {var array_element = redata [i]; var tjson = {légende: array_element.fileidfile.filename, // la largeur du nom de fichier affiché: '120px', URL: '/eim/project/deletefile.do', // delete URL Key: array_element.id, // delete est le paramètre passé par ajax vers l'arrière-plan supplémentaire: {id: 100};; preconfiglist [i] = tjson; } // interroger les paramètres spécifiques par vous-même.FileInput ({uploadUrl: '/eim/upload/uploadfile.do', uploadaSync: true, showcaption: true, showupload: true, // si le bouton de téléchargement est affiché, showRemove: false, // le bouton de suppression est affiché, showcaption: true, // si la boîte d'entrée est affichée: showpree showcancel: true, dropzoneenabled: false, maxFileCount: 10, initialPreviewshowDelete: true, msgFilEstoomany: "Sélectionnez le nombre de fichiers téléchargés dépasse la valeur maximale autorisée!", InitialPrewing 'docx': '<i> </i>', 'xlsx': '<i> </i>', 'pptx': '<i> </i>', 'pdf': '<i> </i>', 'zip': '<i> </ i>' }). off ('filepreupload'). sur ('filepreupload', function () {// alert (data.url);}). sur ("fileuploaded", fonction (événement, outdata) {// Les données renvoyées après le fichier sont téléchargées avec succès, ici unique $ ('# htestlogo'). Val (résultat) .Change (); }4. Backend Java enregistre une partie du code de fichier
@RequestMapping (value = "/ uploadfile", méthode = requestMethod.post) @ResponseBody Public Object UploadFile (HttpServLetRequest Request, HttpservletResponse Response) lève ServletException, ioException {// Convertid to MultiparthTTTPServLetRequest MultiArtTpServleRequest MultiparTeQuest = (MultipartHTTTPServLetRequest) Request; // Mettez le fichier dans la carte du conteneur de la carte <String, multipartFile> fileMap = multipartReQuest.getFileMap (); // Obtenez le paramètre de chemin transmis par la page FolderPath = request.getParameter ("Folder"); String rootPath = BasEconfig.uploadPath; String filepath = rootpath + folderpath + "/"; // Téléchargez le fichier et renvoyez le conteneur de la carte, la carte stocke des informations de fichier fileModel fileModel = uploadifyUtils.uploadFiles (filepath, fileMap); booléen drapeau = service.add (fileModel); if (flag) {string result = fileModel.getId () + ";" + fileModel.getFilePath () + ";" + fileModel.getName () + ";" + fileModel.getFilePath (); Map map = new Hashmap <> (); map.put ("id", fileModel.getId ()); // return fichier enregistrer id //response.getwriter().write(map); carte de retour; } return null; }Remarque: Ce code obtient une partie des informations du fichier téléchargé, comme le nom du fichier, le chemin téléchargé, etc., et enregistre les informations du fichier dans le tableau et l'objet correspondant est FileModel.
5. actualiser le composant une fois le téléchargement terminé.
Effet d'affichage final:
Remarque: nous nous référons ici au jugement de type de fichier TXT. Pour le reste du DOC et du PPT, il existe des icônes d'affichage correspondantes. Il vous suffit d'ajouter le style correspondant lorsque vous déterminez s'il faut juger.
Pièce jointe: Selon le Code de fichier PASS PASSE PASSE / Télécharger:
/ ** * Téléchargement du fichier * * @param SavePath * Enregistrer le répertoire * @param nom * Fichier d'origine * Le nom lors de l'enregistrement contient le suffixe * @param request * @param réponse * @return * / public static string down (string SavePath, nom, réponse de chaîne) {essayez {String path = SAVEPATH + "name; Fichier fichier = nouveau fichier (chemin); if (! file.exists ()) {// request.setAttribute ("name", nom de fichier); return "download_error"; // return le fichier de téléchargement n'existe pas} réponse.setContentType ("application / octtet-stream"); // Définissez la chaîne d'en-tête de la réponse UserAgent = request.GetHeader ("User-Agent"). TolowerCase (); if (userAgent.Indexof ("msie")! = -1) {// ie Browser // System.out.println ("ie Browser"); Response.Addheader ("Content-Disposition", "Pixe; FileName =" + urlencoder.encode (nom, "UTF-8")); } else {réponse.addheader ("Content-Disposition", "attachement; filename =" + new String (name.getBytes ("utf-8"), "iso8859-1")); } Response.AddHeader ("Content-Length", "" + File.Length ()); // Téléchargez le fichier sous la forme d'un flux inputStream fis = new BufferedInputStream (new FileInputStream (path)); octet [] buffer = nouveau octet [fis.available ()]; fis.read (tampon); fis.close (); //Response.setContentType("image/* "); // Définir le type de fichier de retour outputStream toClient = réponse.getOutputStream (); OutputStream BOS = new BufferedOutputStream (TOCLIENT); // BufferedWriter bw = new BufferedWriter (new OutputStreamWriter (BOS)); bos.write (tampon); //bw.close (); bos.close (); toClient.close (); retourner null; } catch (exception e) {e.printStackTrace (); //Response.Reset (); return "exception"; // return à la page d'exception} enfin {/ * if (toClient! = null) {try {toClient.close (); } catch (ioException e) {e.printStackTrace (); }} * /}}Ci-joint:
Téléchargement de téléchargement.UploadFiles partie du code
public static fileModel uploadFiles (String SavePath, map <String, multipartFile> fileMap) {// Téléchargez le fichier // objet du modèle d'attachement fileModel fm = new fileModel (); try {file file = new File (SavePath); // Déterminez si le dossier existe et s'il n'existe pas, créez le dossier makedir (fichier); if (fileMap! = null) {for (map.entry <string, multipartfile> entité: fileMap.EntrySet ()) {multipartFile f = entity.getValue (); if (f! = null &&! f.isempty ()) {String uUid = uploadifyutils.getUUID (); // uUid est le nom de fichier lors de l'enregistrement de la chaîne ext = uploadifyUtils.getFileExt (f.getoriginalFileName ()); // Get File SURCH // File de fichier newfile = new fichier (Savepath + "/" + ". F.Transferto (newfile); fm.setFileName (f.getoriginalFileName ()); fm.setName (UUID + "." + ext); FM.SetFilePath (SavePath); // Save Path FM.SeText (EXT); fm.SetSize (f.getSize ()); }} return fm; } catch (exception e) {log.Error (e); retourner null; }}Ce qui précède est le téléchargement et l'édition de FileInput dans Bootstrap qui vous est présenté par l'éditeur. 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!