1. Ressourcen importieren
2. JSP -Code
<div> <label><span >*</span>Project name: </label> <div> <input type="text" value="${proName }" placeholder="" id="" name="proName" readonly="readonly"> </div> </div> <div> <label>Thumbnail: </label> <div> <div> <div> <div> <div id="fileList"></div> <Div> <div id = "filePicker"> Bild </div> <button id = "btn-star"> starten upload </button> </div> </div> </div> <div> <label> <span>*</span> project Invoice hochladen: <p> oder ziehen Sie das Foto hier, Sie können bis zu 300 Fotos in einer einzigen Zeit auswählen. </div> </div> </div> </div> <div> <button onclick = "article_add ('', 'invoicevo/save? & projectId = $ {projectId} & invoicescan =', '10001');" type = "button"> <i> </i> speichern </button> </div> </div> </div> 3. JS -Code
<script type = "text/javaScript"> var imagePath = null; Funktion article_save () {alert ("Die Kugelschicht wird automatisch geschlossen, wenn das Elternteil auffrischt."); window.parent.location.reload (); } /*Project Invoice-add* / Funktion article_add (Titel, URL, W, H) {if (imagePath) {var index = layer.open ({Typ: 2, Titel: Titel, Inhalt: URL+ImagePath}); Layer.Full (Index); } else {alert ("kein Bild-Upload, bitte zuerst hochladen");}} $ (function () {$ ('. Skin-Minimal Input'). Icheck ({CheckBoxClass: 'iChEckbox-Blue', Radioklas: 'IRAdio-Blue', erhöht: '20%'}); $ ("#Btn-star"), state = "anhängig", Uploader; Server. 'GIF, JPG, JPEG, BMP, PNG', Mimetypen: 'Image/*'}}); '</div>' + '<p> auf Upload ... </p>' + '</div>'), $ img = $ li.find ('IMG'); src) {if (Fehler) {$ img.replacewith ('<Spon> kann nicht voran. {var $ li = $ ('#' + file.id), $ Prozent = $ li .find ('. Progress-Box .sr-Only'); $ li.find (". Datei.Id) .AddClass ('Upload-State-SUCCess') .Find ("Status"). Text ("hochgeladen"); .Text ("Upload-Fehler"); 'startUpload') {State = 'Uploading'; hochladen ');}}); (Funktion ($) {// Initialisierung beginnt, wenn domready {var $ Wrack = $ ('. Uploader-list-container'), // Bildcontainer $ queue = $ ('<ul> </ul>' '). AppendTo ($ Wrack.find ('. Queueuelist '), // Status-Bar- und Kontroll-Dateien- und Steuerelement-Status-Status-Status. $ info = $ statusBar.find ('. Info'), // Upload -Schaltfläche $ Upload = $ Wrap.find ('. UploadBtn'), // Inhalt vor der Datei werden nicht ausgewählt. // Retina optimieren, unter Retina ist dieser Wert 2 -Verhältnis = Fenster. Browser unterstützt Image Base64 Issupportbase64 = (function () {var data = new Image (); var support = true; data.onload = data.onError = function () {if (this.width! = 1 || this.height! "Daten: Bild/GIF; Base64, r0lgodlhaqabaiaaaaaaP /// YwaaaaaqabaaAcauwaow =="; Version.Description; SupportTransition = (function () {var s = document.createelement ('p') (! WebuLader.Uploader.Support ('Flash') && webuLader.browser.ie) {// Flash ist installiert, aber die Version ist zu niedrig. 'Download.Failed': Alert ('Installation fehlgeschlagen') Break; '; '<param name = "wmode" value = "transparent" />' + '<param name = "wmode" value = "transparent" />' + '<param name = "wmode" value = "transparent" />' + '<param name = "wmode" value = "transparent" />' + '<paramname = "WMODE". value = "immer"/> ' +' </Object> '; src = "http://www.adobe.com/macromedia/style_guide/images/160x41_get_flash_player.jpg"/> </a> '); // Instantiated Uploader = webuLader.create ({pick: {id: '#filepicker-2', label: 'klicken, um bild'}, formData: {uid: 123}, dnd: '#dndarea', paste: '#UPloader', swf: 'lib:' lib/webuster/webulol/0.1.5/uplowader ',' lib/webulol/0.1.5/uplowader ',, ChunkSize: 512 * 1024, Server: 'Invoicevo/news_uploder? & projectId = $ {projectId}', // runTimeorder: 'Flash', // Akzeptiere: {// title: 'bilder', // extessions: 'gif, jpg, jpeg, bmp, png', png ', // mimetypes:' Image/ * '. Funktion. Dies wird nicht angezeigt, wenn das Bild in die Seite gezogen wird. Funktion (Elemente) {var verweigert = false, len = length, i = 0, modifizieren Sie JS -Typ unalloded = 'text/plain; Anwendung/JavaScript'; Uploader.on ('dialogopen', function () {console.log ('hier');}); }); $ ('<li id = "' + file.id + '">' + '<p>' + file.name + '</p>' + '<p> </p>' + '<p> <span> </span> </p>' + '</li>'), $ btns = $ ('</p>' + '</li>'). '<span>Rotate to the left</span></div>') .appendTo($li), $prgress = $li .find('p.progress span'), $wrap = $li .find('p.imgWrap'), $info = $('<p></p>'), showError = function(code) { switch (code) { case 'exceed_size': text = 'File size exceeds'; Break; Uploader .makethumb (Datei, Funktion (Fehler, src) {var img; if (error) {$ wrack.text ('nicht vorschau'); return;} if (issupportbase64) {img = $ ('<img src = "+src+">'; 'lib/webuPloader/0.1.5/server/preview.php', {methode: 'post', data: src, dataType: 'json'}) .done (function) {if (response.result) {img = $ ('<img src = "'+reaktion (result) {$ $ $" $ "$" $ "$" $ "$" $ "$" $ "$" $ "$" $ "$" $ "$" $ "$" $ "$ $ $ $ $ $ $ $ $ $ wrade .Text ("Vorschau"); (Prev === 'Queued') {$ li.off ('MouseEner MousEleave'); 'Interrupt') {console.log (Datei.Statustxt); $ info.remove (); $ btns.stop (). Animate ({Höhe: 30}); Uploader.RemoveFile (Datei); DEG, DEGRECTION ': DEGID: removeFile (Datei) {var $ li = $ ('#' + Datei.Id); $ .ec (Prozentsätze, v) {Gesamt + v [0]; updatestatus (); = 'Uploaded successfully' + stats.successNum + 'Photo to XX album, ' + stats.uploadFailNum + 'Photo upload failed, <a href="#" rel="external nofollow" rel="external nofollow" >Re-upload</a> failed picture or <a href="#" rel="external nofollow" rel="external nofollow" > Ignored </a> '}} else {stats = uploader.getStats (); 'Zhang'; $ placeholder.removeclass ('Element-invisible'); $ queue.show (); $ upload.Text ('upload'); } break; $ ('#' +file.id), $ Prozent = $ li. {$ placeeholder.AddClass ('Element-invisable'); REMEDFILE (Datei); (Antwort. break;}}) upload} else if (Status === 'pausiert') {Uploader.Upload (); alert ('todo'); }) (jQuery); </script> Beachten:
4. Controller -Code
/** * Springe zur Seite, auf der die Rechnung hochgeladen wird Projectservice.getProject (ID); map.put ("projectId", id); zurück "project/invoiceupload"; }/** * Laden Sie die Rechnung hoch und speichern Sie die Datenbank * @param-Datei * @param request * @param reaktion * @return */@ResponseBody @RequestMapPing (value = "/news_uploder", method = {requestMethod.post, requestMethod.get. MultiPartFile [] Datei, Long ProjectID, httpServletRequest -Anforderung, httpServletResponse -Antwort) {String flag = null; JsonObject jsonObject = new JSONObject (); try {webURaderUtil webURoLaderUtil = new WebURaDerUtil (); webURoLaderUtil.Upload (Datei [0], "Upload/Invoice/", Anfrage); flag = webUladerUtil.getFileName (); JsonObject.put ("Filepath", Flag); JsonObject.put ("Status", "Erfolg"); } catch (Ausnahme e) {e.printstacktrace (); } return JsonObject; } 5. Werkzeugklassenpaket com.softjx.util;/** *Projektname: qdlimap *Dateiname: webUlloaderUtil.java *Paketname: com.ltmap.platform.cms.util *Datum: 13. April 2017 um 6:30:45 Uhr *Copyright (c) [email protected] All Rights Rainraint. */ import Java.io.file; Java.Text.SimpledateFormat importieren; import Java.util.date; importieren javax.servlet.http.httpServletRequest; import org.springframework.web.multipart.multipartFile; /** *Titel: webuLaderUtil <br/> *Beschreibung: *@Company: litu hi-tech <br/> *@Autor: liu yunsheng *@Version: v1.0 *@da: jdk 1.8.0_40 *@Datum: April 13., 2017 um 18:30:45 PM <br/> */Public Class WebuPloloder {privat String zulässt. "JPG, PNG, GIF, JPEG"; // Dateiformat private long erlaubt = 2l; // Dateigröße private Zeichenfolge Dateiname; private Zeichenfolge [] Dateinamen; public String getAllowsuffix () {return erlaubteFix; } public void setAlllowsuffix (String erlaubteFix) {this.Allowlowsuffix = Zulassungsreiche; } public Long getAllowSize () {return erlaubt*1024*1024; } public void setAllowSize (long erlaubt) {this.AllowSize = erlaubt; } public String getFileName () {return Dateiname; } public void setFileName (String Dateiname) {this.FileName = Dateiname; } public String [] getFileNames () {return FileName; } public void setFileNames (String [] Dateinamen) {this.FileNames = Dateinamen; } / ** * * @title: getFilenamenew * @Description: todo * @param: @return * @Return: String * @Author: liu yunsheng * @date: 14. April 2017 um 10:17:35 Uhr * @throws * / private String getFileNew () {) {) {) {) {) {{) {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{simpledate fmt = throden), “ @. SimpleDateFormat ("yyyymmddhmmssssss"); return fmt.format (neues Datum ()); } / ** * * @title: Uploads * @Description: todo * @param: @param -Dateien * @param: @param destDir * @param: @param Anfrage * @param: @throws Ausnahme * @return: void * @Author: liu yunsheng * @date: April. Uploads (MultiPartFile [] Dateien, String destDir, httpServletRequest -Anforderung) löst die Ausnahme aus {String path = request.getContextPath (); String basepath = request.getScheme ()+": //"+request.getServerName ()+":"+request.getServerport ()+Pfad; try {Dateinams = new String [Dateien.length]; int index = 0; für (MultiPartFile -Datei: Dateien) {String -Suffix = file.getOriginalFileName (). substring (Datei.getOriginalFileName (). LastIndexof (")+1); int länge = getAlllowsuffix (). indexof (Suffix); if (Länge == -1) {Neue Ausnahme werfen ("Bitte laden Sie die Datei im zulässigen Format hoch"); } if (file.getSize ()> getAllowsize ()) {Neue Ausnahme werfen ("Die von Ihnen hochgeladene Dateigröße ist außerhalb des Bereichs"); } String realPath = request.getSession (). GetServletContext (). GetRealPath ("/"); Datei destfile = new Datei (RealPath+destDir); if (! destfile.exists ()) {destfile.mkdir (); } String fileNamenew = getFilenamenew ()+"."+Suffix; // Datei f = neue Datei (destfile.getabsoluteFile ()+"//"+fileNamenew); file.transferto (f); f.createNewFile (); Dateinamen [index ++] = Basepath+destDir+fileNamenew; }} catch (Ausnahme e) {throw e; }} / ** * * @title: Upload * @Description: todo * @param: @param Datei * @param: @param destDir * @param: @param Anfrage * @param: @throws Exception * @return: void * @author: liu yunsheng * @date: aprows 14, 2017 up (10:10:16:16 Datei, String destDir, httpServletRequest -Anforderung) löst eine Ausnahme aus {String path = request.getContextPath (); // http: // localhost: 8088/huahang string basepath = request.getscheme ()+": //"+request.getServerName ()+":"+request.getServerport ()+path; try {string suffix = file.getOriginalFileName (). substring (file.getOriginalFileName (). LastIndexof (".")+1); int länge = getAlllowsuffix (). indexof (Suffix); if (Länge == -1) {Neue Ausnahme werfen ("Bitte laden Sie Dateien im zulässigen Format hoch"); } if (file.getSize ()> getAllowSize ()) {Neue Ausnahme werfen ("Die von Ihnen hochgeladene Dateigröße hat den Bereich überschritten"); } String realPath = request.getSession (). GetServletContext (). GetRealPath ("/")+"/"; Datei destfile = new Datei (RealPath+destDir); if (! destfile.exists ()) {destfile.mkdirs (); } String fileNamenew = getFilenamenew ()+"."+Suffix; Datei f = neue Datei (destfile.getabsoluteFile ()+"/"+fileNamenew); file.transferto (f); f.createNewFile (); // den vollständigen Pfad der Website http: // localhost: 8080/qdlimap/upload/user/20170414104142667.png // Dateiname = Basepath+Destdir+FileNamenew; // RELative Pfad upload/user/20170414104142667.png Dateiname = destDir+fileNamenew; } catch (Ausnahme e) {throw e; }}}Zusammenfassen
Das obige ist der WebuPlader, den ich Ihnen vorgestellt habe. Die Image -Batch -Upload -Funktion ist mit Beispielcode ausgestattet. 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!