*1.Bootstrap-fileInput Plug-in Git-Download-Adresse
https://github.com/kartik-v/bootstrap-fileinput.git
2. Lösen Sie die Verwendung von Bootstrap-Fileput, um den Rückgabewert zu erhalten
Laden Sie Bilder hoch
$("#file-0a").fileinput({uploadUrl : "/upload_img",//Uploaded the urlallowedFileExtensions for uploading the image: [ 'jpg', 'png', 'gif' ],overwriteInitial : false,maxFileSize : 1000,//Uploaded the maximum size of the file maxFilesNum : 1,//Uploaded the Maximale Anzahl der Dateien InitialCaption: "Bitte laden Sie das Händler -Logo hoch", // Der anfängliche Textfeldwert // erlaubt fileTypes: ['Bild', 'Video', 'Flash'], Slugcallback: Funktion (Dateiname) {return FileName.Replace ('(', '_').Beachte
$ ('#file-0a'). on ('fileUpload', Funktion (Ereignis, Daten, Vorschau, Index) {var form = data.form, file = data.files, extra = data.extra, response = data.response, reader = data.Reader; console.log (Antwort); // drucken Sie die zurückgegebenen.JSP -Seite
<input id = "file-0a" type = "Datei" multiplydata-min-file-count = "1" name = "upload_logo">
wobei data-min-file-count = ”1” auf die minimale Anzahl der hochgeladenen Dateien bezieht
3. Servercode
Verwenden Sie Spring's Own Plug-In zum Hochladen. Das Framework ist SpringMVC
Bohne
Java.util.List importieren; public class Bild {private Liste <string> Pfade; publiclist <string> getPaths () {return paths;} public void setPaths (Liste <string> Pfade) {this.paths = paths;}}Regler
@ResponseBody@requestMapping (value = "upload_img", method = requestMethod.post) öffentliches Bild UploadImage (@RequestParam multipartFile [] upload_logo) löst ioException {log.info ("upload picture"); picture pict = new picture (); list <String> paths = news Uploadutil.getFolder (); für (MultiPartFile myFile: Upload_Logo) {if (myFile.isempty ()) {log.info ("Datei nicht hochgeladen"); } else {log.info ("Dateilänge:" + myFile.getSize ()); log.info ("Dateityp:" + myFile.getContentType ()); log.info ("Dateiname:" + myFile.getName ()); log.info ("Dateiname:" + myFile.getOriginalFileName ()); log.info("========================================================================================= =====================================================================ieben =====================================================================ieben ==========================================================ieben Uploadutil.WriteFile (myFile.getoriginalFileName (), Dir, MyFile.getInputStream ()); log.info ("Dateipfad:"+Pfad); Paths.add (Pfad);}} pic.setPaths (Pfade); Rückgabepilz;} return pic;}hochladen
private statische endgültige Logger log = loggerFactory.getLogger (Uploadutil.Class); private uploadutil () {} private static SimpleDateFormat fullSdf = new SimpledateFormat ("yyyymmddhmmmsssss"); private static SimpleDateFormat Ordner = new SimpledateFormat ("yyyy" + Datei.separator + "mm" + Datei.separator + "dd");/*** return to Yyyy -Datei srcname* Original -Dateiname* @param dirname* Verzeichnisname* @param Eingabe* Eingabestress, der gespeichert werden soll In Tomcats server.xml String uploadDir = contextUtil.getSySProp ("upload_dir"); // Setzen Sie den Upload -Pfad // den Zugriffspfad der virtuellen Verzeichnis String virtualdir = contextil.getSySProp ("virtual_dir"). oder srcname; // den Pfad in die Datenstring SavePath = Dateiname.replace (UploadDir, ""); SavePath = virtualDir + SavePath.Replace ("//", "/"); Datei = neue Datei (Dateiname); if (! File.getParentFile (). {file.getParentFile (). mkdirs ();} fileOutputStream fos = new FileOutputStream (Datei); // einmal 30kbbyte [] readbuff = new Byte [1024 * 30]; int count = -1; while (count = input.Read (readbuff, 0, readbuff.länge)! count);} fos.flush (); fos.close (); input.close (); return SavePath;}4. Lösen Sie einige Probleme beim Hochladen
Wenn Sie auf ein Klicken zum Hochladen stoßen, wird die Fortschrittsleiste als 100%angezeigt, und die JSP -Seite zeigt [Objekt, Obejct], und achten Sie darauf, ob das zurückgegebene JSON -Objekt, das Sie sich im Hintergrund befinden.
Das obige ist die Methode des FileInput-Plug-in von Bootstrap, um mehrere Dateien-Uploads zu implementieren, die der Editor Ihnen vorgestellt hat. 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!