1. Importer des ressources
2. Code jsp
<div> <label> <span> * </span> Nom du projet: </ label> <div> <input type = "text" value = "$ {proname}" placeholder = "" id = "" name = "proname" readonly = "readonly"> </ div> </ div> <v> <div> thumbnail: </vabe> <v> <v> </ div> <v> <v> <valed> thumbnail: </vabe> <v> <v> </ div> <v> id="fileList"></div> <div> <div id="filePicker">Select picture</div> <button id="btn-star">Start upload</button> </div> </div> </div> <div> <label><span >*</span>Project invoice upload: </label> <div> <div> <div> <div> <div id="dndArea"> <div id = "filepicker-2"> </div> <p> ou faire glisser la photo ici, vous pouvez sélectionner jusqu'à 300 photos en un seul temps </p> </v> </div> <div style = "Display: Aucun;"> <v> <span> 0% </span> <span> </ span> </ div> <v> <v> <v> <v> id = "filePicker2"> </ div> Téléchargement </div> </ div> </div> </div> </div> </div> </div> <div> <Button onClick = "Article_Add ('', 'InvoiceVo / Save? & projectId = $ {projectId} & invoicesCan =', '10001');" type = "Button"> <i> </i> Enregistrer </ Button> </div> </div> </div> 3. Code js
<script type = "text / javascript"> var imagePath = null; fonction article_save () {alert ("La couche de balle sera automatiquement fermée lors de la rafraîchissement du parent."); window.parent.location.reload (); } / * Project Invoice-Add * / Function Article_Add (Title, URL, W, H) {if (imagePath) {var index = couche.open ({type: 2, titre: titre, contenu: url + imagePath}); couche.full (index); } else {alert ("pas de téléchargement d'image, veuillez d'abord télécharger l'image");}} $ (function () {$ ('. Skin-Minimal Input'). $ ("# btn-star"), state = "en attente", uploader; Le bouton de fichier. mimetypes: 'image / *'}}); '</ div>'), $ img = $ li.find ('img'); $ list.append ($ li); $ img.replacewith ('<span> ne peut pas suivre </span>'); file.id), $ pour cent = $ li .find ('. Progress-box .sr-only'); $ li.find (". State"). File. Error ");}); // Une fois le téléchargement terminé, il est réussi ou échoué, supprimez d'abord la barre de progression. Uploader.on ('uploadComplete', fonction (fichier) {$ ('#' + file.id) .find ('. Progress-box'). fadeout ();}); uploadher.on ('all', function (type) {if (type === '') 'uplowing';} else if (type === 'stopupload') {state = 'paused'; $ btn.on ('click', function () {if (state === 'uploading') {uploader.stop ();} else {uploader.upload ();}});}); (Fonction ($) {// L'initialisation démarre lorsque DomReady {var $ wrap = $ ('. uploader-list-contrainer'), // image contener $ queue = $ ('<ul> </ul>'). annex = $ statusbar.find ('. info'), // bouton de téléchargement $ upload = $ wrap.find ('. uploadbtn'), // contenu avant que le fichier ne soit sélectionné. RETINE, SOUS RETINE, cette valeur est 2 Ratio = Window.DevicePixelratio || 1, // Ratio Thumbnailwidth = 110 * Image Base64 issupportBase64 = (function () {var data = new Image (); var support = true; data.onload = data.onerror = function () {if (this.width! = 1 || this.height! = 1) {support = false;}} data.src = "Données: Image / GIF; Base64, R0lgodlhaqabaiaaaaaaap /// ywaaaaaqabaaacauwaow =="; } catch (ex) {try {version = new activeXObject ('ShockWaveflash.shockwaveflash') .getVariable ('$ version');} Catch (Ex2) {version = '0,0'; (fonction () {var s = document.CreateElement ('p'). Style, r = 'transition' dans s || 'webkittransition' dans s || 'moztransition' dans s || 'mStransition' dans s || 'otransition' dans s; s = null; return r;}) (), // webransition instance uploker uploder; (! Webuploader.uploader.support ('flash') && webuploader.browser.ie) {// flash est installé mais la version est trop faible. «Téléchargement. if (webuploadher.browser.ie) {html + = 'classid = "clsid: d27cdb6e-ae6d-11cf-96b8-445553540000"'; name = "wmode" value = "transparent" /> '+' <param name = "wmode" value = "transparent" /> '+' <param name = "wmode" value = "transparent" /> '+' <param name = "wmode" value = "transparent" /> '+' <param name = "wmode" value = "transparente" /> '+' + '<param name = "permet de" valeur = "transparente" />' + '+' <param name = "Permet Contracte" value = "value" /> '+' </ objet> '; src = "http://www.adobe.com/macromedia/style_guide/images/160x41_get_flash_player.jpg" /> </a> '); // Instantiated uploader = WebUploader.create({ pick : { id : '#filePicker-2', label : 'click to select picture' }, formData : { uid : 123 }, dnd : '#dndArea', paste : '#uploader', swf : 'lib/webuploader/0.1.5/Uploader.swf', chunked : false, chunkSize : 512 * 1024, serveur: 'factureVo / news_uploder? & ProjectId = $ {projectId}', // runTimeOrder: 'Flash', // accepter: {// title: 'images', // extensions: 'gif, jpg, jpeg, bmp, png', // Mimetypes: 'Image / *' '//}, // Discult the will. apparaître lorsque l'image est traînée dans la page, activez l'image. Denid = false, len = items.length, i = 0, // Modifier JS function () {console.log ('ici');}); / * uploader.addbutton ({id: '# filepicker2', étiquette: 'Continuez à ajouter'}); * / uplower.on ('ready', function () {window.uploader = uploader;}); '<p>' + file.name + '</p>' + '<p> </p>' + '<p> <span> </span> </p>' + '</li>'), $ btns = $ ('<v>' + '<span> delete </span>' + '<pan> rotate à la droite </pan>' + '<pan> rotate à la gauche </ Span> </ Div>') .APPEDTO ($ li), $ Prgress = $ li .find ('p.progress span'), $ wrap = $ li .find ('p.imgwrap'), $ info = $ ('<p> </p>'), showerror = function (code) {switch (code par défaut: 'upload a échoué, veuillez essayer'; IMG; if (Error) {$ wrap.Text (ne peut pas prévoir '); 'Post', data: src, dataType: 'json'}) .done (function (réponse) {if (réponse.result) {img = $ ('<img src = "' + réponse.result + '">'); wrap .Empty (). Thumbnailwidth, thumbnailHeight); pourcentage [file.id] = [file.size, 0]; MouSELAGE '); $ btns.remove ();} // doucherror (file.statUSTExt); 'Block');} else if (cur === 'complet') {$ li.append ('<span> </span>'); $ li.on ('Mouseleave', function () {$ btns.stop (). animate ({height: 0});}); $ btns .on ('click', 'span', function () {var index = $ (this) .Index (), deg; switch (index) {case 0: uplower.removeFile (file); return; rate 1: File. Cas 2: File.rotation - = 90; 'PROCIDE: DIMMAGETRANSform pourcentages [file.id]; v [0] * 1];}); === 'Ready') {Text = 'SELECT' + FileCount + 'Images Total' + WebUpLoadher.FormatSize (FileSize) + '. stats.uploadfailnum + 'téléchargement de photo a échoué, <a href = "#" rel = "external nofollow" rel = "external nofollow"> re-upload </a> image échouée ou <a href = "#" rel = "external nofollow" rel = "external nofollow"> issue </a>'}} else {stats = uploader.get.);); FileCount + 'Zhang (' + webupLoadher.FormatSize (FileSice) + '), Téléchargé' + stats.SuccressNum + 'Zhang'; === État) {return;} $ upload.removelass ('State-' + State); uploader. $ (# filepicker2). $ upload.tex Image réussie, réinitialiser le «Done»; pourcentage [File.id] [1] = pourcentage; UpdateTotalProgress ();}; Response) {alert (réponse.statue); (Type) {Cas ($) .hasclass ('Disabled')) {return false; }); $ info.on (cliquez sur }) (jQuery); </cript> Avis:
4. Code de contrôleur
/ ** * Passez à la page où la facture est téléchargée * @param proname * @param map * @return * / @requestmapping (value = "/ upload") public String invoiceupload (string proname, long id, map <string> map) {map.put ("proname", pronom); projectservice.getProject (id); map.put ("projectId", id); return "project / invoiceupload"; } / ** * Téléchargez la facture et enregistrez la base de données * @param fichier * @param request * @param réponse * @return * / @ResponseBody @RequestMapping (value = "/ news_uploder", méthode = {requestMethod.post, requestMethod.get}, productS = "application / json; charset = utf-8") publique Fichier multipartFile [], Long ProjectId, HttpServLetRequest Request, HttpServletResponse Response) {String Flag = null; JSONObject JSONObject = new JSONObject (); essayez {webuploadoirUtil webuploaderUtil = new webuploaderUtil (); webuploadoirUtil.upload (file [0], "upload / invoice /", request); flag = webuploadoirUtil.getFileName (); jsonObject.put ("filepath", drapeau); jsonObject.put ("statut", "succès"); } catch (exception e) {e.printStackTrace (); } return jsonObject; } 5. Package de classe d'outils com.softjx.util; / ** * Nom du projet: QDLIMAP * Nom du fichier: webuploadoirUtil.java * Nom du package: com.ltmap.platform.cms.util * Date: 13 avril 2017 à 6:30:45 PM * Copyright (c) 2017,578888218 @ qq.com. * / import java.io.file; import java.text.simpledateFormat; Importer java.util.date; Importer javax.servlet.http.httpservletRequest; import org.springframework.web.multupar.MultiPartFile; / ** * Titre: webuploadoirUtil <br/> * Description: * @ Company: litu hi-tech <br/> * @ auteur: liu yunsheng * @ version: v1.0 * @ depuis: jdk 1.8.0_40 * @ date: 13 avril 2017 à 6:30:45 PM <br/> * / public class webuploaderUtil {private String permets perdans "JPG, PNG, GIF, JPEG"; // Autoriser le format de fichier privé Long Autoriser = 2l; // Autoriser la taille du fichier Private String Name; String privé [] Noms de fichiers; public String getAlLOWSuffix () {return permetsuffix; } public void setALLowsuffix (string permetsuffix) {this.allowsuffix = permisuffix; } public long getAllowSize () {return permets * 1024 * 1024; } public void setallowSize (long permets) {this.allowSize = permets; } public String getFileName () {return filename; } public void setFileName (String filename) {this.filename = filename; } public String [] getFileNames () {return FileSames; } public void setFileNames (String [] fileNames) {this.filenames = fileNames; } / ** * * @title: getFileNamenew * @Description: todo * @param: @return * @return: string * @author: liu yunsheng * @date: 14 avril 2017 à 10:17:35 AM * @throws * / private String getFileNamenew () {mpledateForat fmt = new SimpledateFormat ("yyyymmddhhmmsssss"); return fmt.format (new Date ()); } / ** * * @title: uploads * @description: todo * @param: @param fichiers * @param: @param destdir * @param: @param demande * @param: @throws exception * @return: void * @Author: liu yunsheng * @Date: 14 avril 2017 à 10:17:14 Am * @throws * / public Void uplowing (MultiartFile [] Files, String destdir, HttpServleRequest Request) lève l'exception {String path = request.getContextPath (); String basepath = request.getscheme () + ": //" + request.getServerName () + ":" + request.getServerport () + path; try {fileNames = new String [files.length]; int index = 0; pour (Fichier multipartFile: fichiers) {String suffix = file.getoriginalFileName (). substring (file.getOriginalFileName (). LastIndexof (".") + 1); int length = getAllowsuffix (). indexof (suffixe); if (longueur == -1) {lancer une nouvelle exception ("Veuillez télécharger le fichier au format autorisé"); } if (file.getSize ()> getAllowSize ()) {lancer une nouvelle exception ("La taille du fichier que vous avez téléchargé est hors de portée"); } String realPath = request.getSession (). GetServletContext (). GetRealPath ("/"); Fichier destfile = nouveau fichier (realPath + destdir); if (! destfile.exists ()) {destfile.mkdir (); } Chaîne filenamenew = getFileNamenew () + "." + Suffixe; // fichier f = new File (destfile.getAbsoluteFile () + "//" + filenamenew); file.transferto (f); f.CreateEnewFile (); Names de fichiers [index ++] = baspath + destdir + filenamenew; }} catch (exception e) {throw e; } } /** * * @Title: upload * @Description: TODO * @param: @param file * @param: @param destDir * @param: @param request * @param: @throws Exception * @return: void * @author: Liu Yunsheng* @Date: April 14, 2017 at 10:16:16 am * @throws */ public void upload(MultipartFile file, String destdir, httpsservletRequest request) lève l'exception {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 length = getAllowsuffix (). indexof (suffixe); if (longueur == -1) {lancer une nouvelle exception ("Veuillez télécharger des fichiers au format autorisé"); } if (file.getSize ()> getAllowSize ()) {lancer une nouvelle exception ("La taille du fichier que vous avez téléchargé a dépassé la plage"); } String realPath = request.getSession (). GetServletContext (). GetRealPath ("/") + "/"; Fichier destfile = nouveau fichier (realPath + destdir); if (! destfile.exists ()) {destfile.mkDirs (); } Chaîne filenamenew = getFileNamenew () + "." + Suffixe; Fichier f = nouveau fichier (destfile.getabsolutefile () + "/" + filenamenew); file.transferto (f); f.CreateEnewFile (); // Inclut le chemin complet du site Web http: // localhost: 8080 / qdlimap / upload / user / 20170414104142667.png // filename = BasEpath + destdir + filenamenew; // Renvoie le chemin relatif Upload / User / 20170414104142667.png filename = destdir + filenamenew; } catch (exception e) {throw e; }}}Résumer
Ce qui précède est le webuploader que je vous ai présenté. La fonction de téléchargement par lots d'image est équipée d'un exemple de code. 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!