Wenn Sie die Konfiguration von Bootstrap-fileInput nicht kennen, können Sie die offizielle Website überprüfen: http://plugins.krajee.com/file-input.
LOGISCHE BESCHREIBUNG: Erhalten Sie zuerst die Datenanzeige aus dem Hintergrund und bearbeiten Sie sie dann.
Laden Sie ohne weiteres den Code hoch.
1. Teil des Seitencode:
<div> <label for="inputEmail3">Project LOGO</label> <div> <input id="testlogo" type="file" name="icoFile" /> <input type="text" name="htestlogo" id="htestlogo" onchange="addFile(this)" > </div> </div>
Hinweis: Wo Onchange () von meinem Geschäft verlangt wird, und nach Abschluss des Uploads wird automatisch ausgeführt. Diese Methode kann entfernt werden.
2. Erhalten Sie die Initialisierungsdatenmethode:
// Initialisieren, um die Originaldatei $ (function () {$ .ajax ({type: "post", url: "/eieim/project/testFileUpload.do", Datentyp: "JSON", Erfolg: Funktion (Data) {Layer.msg ('Operation Suctrescees.); Errorther) {Layer.msg ('Operation fehlgeschlagen!');Beschreibung: Hier kehre ich ein Objektarray zurück: List <Mitseruser>, das als alle Schüler in einer Klasse verstanden und Avatare angezeigt wird
3.. Initialisieren Sie die Bootstrap-Fileput-Komponente:
FunktionshowPhotos (DJSON) {// Gibt die JSON -String in ein JSON -Objekt im Hintergrund var redata = eval (djson) zurück; // Vorschau des Bildes JSON Data Group var Prelist = new Array (); für (var i = 0; i <redata.length; i ++) {var array_element = redata [i]; // Hier beziehen wir uns auf das Urteil für .txt und fügen den Rest zu sich selbst hinzu, wenn (array_element.fileIdfile.name.indexof ("txt")> 0) {// Anzeige von Nicht-Image-Typen Prelist [i] = "<div class = 'Datei-Preview-öher-Frame'> <divist class = 'file-preview-teer-teer-teer-teer-teer-teer-teer-teer-teer-teper-klasse =' angezeigt wird. fa-file-text-o text-info'></i></span></div></div>" }else{ // Image type preList[i]= "<img src=/"/eim/upload/getIMG.do?savePath="+array_element.fileIdFile.filePath+"&name="+array_element.fileIdFile.name+"/" class =/"Dateipreview-Image/"> "; }} var previewjson = vorlist; // Konfigurationsdaten, die der JSON -Datengruppe des Vorschau -Images über var preonfiglist = new array () entsprechen; für (var i = 0; i <redata.length; i ++) {var array_element = redata [i]; var tjson = {caption: array_element.FileIdFile.FileName, // Die angezeigte Dateiname Breite: '120px', url: '/ieim/project/deleteFile.do', // URL -Schlüssel löschen: array_element.id // löschlich ist das Parameter, das das Parameter über die Einschweige übergeht. preconfiglist [i] = tjson; } // Abfragen Sie die spezifischen Parameter selbst. showPreview:true, showCancel:true, dropZoneEnabled: false, maxFileCount: 10, initialPreviewShowDelete:true, msgFilesTooMany: "Select the number of uploaded files exceeds the maximum allowed value!", initialPreview: previewJson, previewFileIcon: '<i></i>', allowedPreviewTypes: ['image'], previewFileIconSettings: { 'docx': '<i></i>', 'xlsx': '<i></i>', 'pptx': '<i></i>', 'pdf': '<i></i>', 'zip': '<i></i>', 'sql': '<i></i>', }, InitialPreviewConfig: Preonfiglist}). Off ('filePreUpload'). On ('filePreUpload', function () {// alert (data.Url);}). On ("DateiElploded", Funktion (Ereignis, Outdata) {// Die zurückgegebenen Dateien, die nach der Datei zurückgegeben wurden, wird die Datei zurückgegeben. Outdata.Response.id; }4. Backend Java speichert einen Teil des Dateicode
@RequestMapping(value="/uploadFile",method=RequestMethod.POST) @ResponseBody public Object uploadFile(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //Convert to MultipartHttpServletRequest MultipartHttpServletRequest multipartRequest = (MultiparthttpServletRequest) Anfrage; // Die Datei in die MAP -Containerkarte <String, MultiPartFile> fileMap = multipArtrequest.getFilemap () einrücken; // den Pfadparameter abrufen, der vom Seite ordnerPath = request.getParameter ("Ordner") übergeben wird; String rootPath = BaseConfig.UploadPath; String filepath = rootPath + OrdnerPath + "/"; // Die Datei hochladen und den Kartencontainer zurückgeben. Die Karte speichert Dateiinformationen Filemodel filemodel = uploadifyutils.UploadFiles (FilePath, FilEMAP); boolean flag = service.add (filemodel); if (flag) {string result = fileModel.getId ()+";"+filemodel.getFilepath ()+";"+filemodel.getName ()+";"+filemodel.getFilepath (); Map map = new Hashmap <> (); map.put ("id", filemodel.getId ()); // Datei speichern id //response.getWriter().Write(map); Rückgabekarte; } return null; }Hinweis: Dieser Code erhält einen Teil der Informationen der hochgeladenen Datei, z. B. den Dateinamen, den hochgeladenen Pfad usw., und speichert die Dateiinformationen in die Tabelle, und das entsprechende Objekt ist Filemodel.
5. Aktualisieren Sie die Komponente nach Abschluss des Uploads.
Endgültige Anzeigeeffekt:
Hinweis: Hier verweisen wir auf das TXT -Dateityp -Urteil. Für den Rest des Dokuments und des PPT gibt es entsprechende Anzeigesymbole. Sie müssen den entsprechenden Stil nur hinzufügen, wenn Sie feststellen, ob Sie beurteilen sollen.
Anhang: Gemäß dem PATH PADE PAST/DOWNLOAD -Dateicode:
/** * File download* * @param savePath * Save directory* @param name * Original file * The name when saving contains the suffix* @param request * @param response * @return */ public static String down(String savePath, String name, String fileName, HttpServletRequest request, HttpServletResponse response) { try { String path = savePath + "/" + name; Datei Datei = neue Datei (Pfad); if (! file.exists ()) {// request.setAttribute ("name", fileName); return "download_error"; // Die Download-Datei gibt nicht existiert} response.setContentType ("Anwendung/Oktett-Stream"); // Setzen Sie den Header String von userAgent = Anrequenz.Getheader ("user-Agent"). TolowerCase (); if (userAgent.indexof ("msie")! response.addHeader ("Inhaltsdisposition", "Anhang; Dateiname =" + urlencoder.encode (Name "utf-8"); } else {response.addHeader ("Inhaltsdisposition", "Anhang; Dateiname =" + new String (name.getBytes ("utf-8"), "ISO8859-1"); } response.addHeader ("Inhaltslänge", "" + file.length ()); // Die Datei in Form eines Stream InputStream fis = new BufferedInputStream (neuer FileInputStream (Pfad)) herunterladen; byte [] buffer = new byte [fis.Available ()]; fis.read (puffer); fis.close (); //response.setContentType("image/* "); // Rückgabe -Dateityp ausgiehenstream toclient = response.getOutputStream (); OutputStream bos = neuer bufferedOutputStream (toclient); // BufferedWriter BW = neuer Bufferer (New OutputStreamWriter (BOS)); Bos.Write (Puffer); //bw.close (); bos.close (); toclient.close (); null zurückkehren; } catch (Ausnahme e) {e.printstacktrace (); //response.reset (); Rückgabe "Ausnahme"; // Return to the Exception} endlich {/* if (toclient! = null) {try {toclient.close (); } catch (ioException e) {e.printstacktrace (); }}*/}}Beigefügt:
Uploadifyutils.UploadFiles Teil des Code
öffentliches statisches Filemodel UploadFiles (String SavePath, Karte <String, MultiPartFile> fileMap) {// Laden Sie die Datei // Anhangsmodell -Objekt Filemodel fm = new Filemodel () hoch; try {Datei file = new Datei (savePath); // Bestimmen Sie, ob der Ordner existiert und ob er nicht existiert, erstellen Sie den Ordner Makedir (Datei). if (filemap! if (f! = null &&! f.transferto (newfile); fm.setFileName (f.getOriginalFileName ()); fM.SetName (uUid+"."+ext); fm.setFilepath (SavePath); // Pfad fm.setext (ext); fm.setSize (f.getSize ()); }} return fm; } catch (Ausnahme e) {log.Error (e); null zurückkehren; }}Das obige ist das Hochladen und Bearbeiten von FileInput in Bootstrap, die Ihnen vom Editor vorgestellt wurden. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!