1. Description des raisons de l'utilisation du plugin Webuploader
J'ai été trompé par le projet que je fais maintenant.
Permettez-moi d'abord de parler de mon projet Architecture Spring + Struts2 + Mybatis + MySQL
Alors quoi. Il a été convenu qu'il serait suffisant pour télécharger en fonction de 2G, j'ai donc utilisé le plug-in AjaxFileUpload. Parce que je l'ai utilisé pour télécharger des images avant, je l'ai utilisé directement lors du téléchargement de la pièce jointe.
Divers codes et codes ont été testés. Il n'y a aucun problème avec le téléchargement des fichiers 2G. L'astuce est venue. Après le lancement du projet, le client a demandé de télécharger des fichiers 4G et il y avait encore plus de 20 g. . Nani, vous ne l'avez pas dit plus tôt. . .
Sous IE11, utilisez le plug-in ajaxfileupload.js pour télécharger des fichiers qui dépassent la 4G, et IE lance directement une exception. Un message avec un résultat arithmétique dépassant les 32 bits popup.
Comme indiqué dans la figure ci-dessous:
En tant que note supplémentaire, mon système est 64 bits, la mémoire 8G, le navigateur Google et le navigateur IE11 sont tous 32 bits. C'est un problème de télécharger 8G à l'aide d'AjaxFileUpload sous Google. Aucune erreur ne sera signalée.
IE11 a plus de 4G et il est mal de signaler directement l'image ci-dessus. certainement pas. Modifiez le plug-in.
2. Sélection du plugin
1. Plugin de téléchargement de flux. Stream est un plug-in pour résoudre le problème du téléchargement de fichiers par différents navigateurs. Il s'agit d'une combinaison de la version Flash de Uploadify et de HTML5. Adresse du plugin http://www.twinkling.cn/
La fonction est en effet très puissante, mais le style CSS est fixe, ce qui est très différent du style de barre de progression de mon projet actuel. Abandonner ce plugin
2. Pluginwuploader. WebUploader est un simple composant de téléchargement de fichiers moderne principalement HTML5 et complété par Flash développé par l'équipe Baidu Webfe (FEX). Dans les navigateurs modernes, nous pouvons donner un jeu complet aux avantages de HTML5, sans abandonner les navigateurs traditionnels IE, et continuer à utiliser le Flash Runtime original, et sont compatibles avec IE6 +, iOS 6+ et Android 4+. La même méthode d'appel peut être sélectionnée par les utilisateurs à volonté.
L'utilisation de la fragmentation de fichiers importante en téléchargement simultané améliore considérablement l'efficacité du téléchargement de fichiers. Adresse du plugin http://fex.baidu.com/webuploader/
Ce plugin peut personnaliser les styles CSS. Les fonctions sont également très puissantes, j'ai donc adopté de manière décisive ce plug-in.
3. Téléchargement unique de fichiers Webuploader.
J'utilise la version 0.1.5 de Webuploader. Webuploader tranche principalement des fichiers volumineux sur le client, tels que l'envoi de demandes de rupture tous les 5 m et la réception de fichiers de l'arrière-plan pour fusionner les fichiers. Il existe deux façons de fusionner les fichiers. La première consiste à passer tous les éclats à l'arrière-plan, puis à les fusionner. Il s'agit de garantir que l'ordre de rupture est correct, et le second est de fusionner en rupture. J'ai utilisé le deuxième du projet. Le téléchargement de fichiers à l'aide du chargeur Web nécessite trois ressources: JS, CSS et SWF.
1. introduce les fichiers JS
<script type = "text / javascript" src = "../ main / js / webuploader.js"> </ script> <script type = "text / javascript" src = "../ main / js / webuploader.min.js"> </ script>
2. Présenter le style CSS
<link href = "../ main / css / webuploader.css" rel = "Stylesheet" type = "text / css" />
3. Introduire SWF . SWF n'y fait pas référence directement. Spécifiez simplement le chemin SWF lorsque le webuploader est initialisé.
4.Upload3.html
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "ja" Lang = "Ja"> <A-head> <meta http-equiv = "Content-Type" content = "text / html; charmet = utf-8" /> <méta htp-equied = "contenu" ja = " /> <meta http-equiv = "contenu-script-type" content = "text / javascript" /> <meta http-equiv = "contenu-style-type" contenu = "text / css" /> <itle> démo </ title> <link href = "../ type / css / stream -v1.css" rel = "styleSheet" Type = "text / css-v1.csS" REL = "STALLESHET /> <link href = "../ main / css / webuploader.css" rel = "stylesheet" type = "text / css" /> <script type = "text / javascript" src = "../ main / js / jQuery-1.11.1.min.js"> </ script> <script type = "text / javascript" src = "../ main / js / jQuery-2.1.4.min.js"> </ script> <script type = "text / javascript" src = "../ main / js / jQuery-Ui.min.js"> </ script> <script type = "Text / javascript" src = "../ main / js / bootstrap-datepicker.min.js"> </ script> <script type = "text / javascript" src = "../ main / js / bootstrap-datepicker.min.js"> </ script> <script type = "text / javascrip" src = "../ main / js / locales / bootstrap-datepicker.ja.min.js"> </ script> <script type = "text / javascrip type = "text / javascript" src = "../ js / contente / upload3.js"> </ script> <vody> <div id = "uploader"> <! - Utilisé pour stocker les informations du fichier -> <div id = "thelist"> </ div> <div> <div id = "attach"> </ div> <entrée Type = "Button" Value = "upload" id = "uploader1"> <! --- Utilisé pour stocker des informations sur le fichier -> <div id = "theList1"> </ div> <div> <div id = "Multi"> </ div> <input type = "Button" value = "upload" id = "Multiupload" /> </ div> </v> </body> </html>
L'image est relativement simple, elle ressemble à ceci
5.Upload3.js
Y compris le téléchargement de fichiers unique, le téléchargement multi-fichiers et plusieurs instances de webuploader
/ *************************************. Inutile. // FileVal: «Multifile», // Personnalisez l'attribut de nom du fichier. Le fichier ne peut pas être récupéré lorsque vous utilisez le fichier // Il est recommandé que l'auteur ait le temps de changer cet endroit, il tuera les gens. server: "ContentsDetail!ajaxAttachUpload.action", duplicate:true,//Is the same file resize: false,formData: {"status":"file","contentsDto.contentsId":"0000004730","uploadNum":"0000004730","existFlg":'false'}, compress: null,//Image not compressed chunked: true, // shash Processing ChunkSize: 5 * 1024 * 1024, // 5m par tranche de tranche: false, // s'il échoue, n'essayez pas les threads: 1, // télécharger le numéro simultané. Nombre maximum de processus de téléchargement autorisés en même temps. // RunTimeOrder: 'Flash', // Désactivez la fonction de glisser mondiale. Cela n'apparaîtra pas lorsque l'image sera traînée dans la page, ouvrez l'image. disablegLobaldnd: true}); // Lorsqu'un fichier est ajouté, uploader.on ("filequeUeEd", function (file) {console.log ("filequeUed:"); $ list.append ("<div id = '" + file.id + "' class = 'item'>" + "<h4 class = 'info'>" + file.name + "</ h4>" + "<p class = 'state'> attendre pour upload ... </ p>" + "</div>");}); // Lorsque tous les fichiers sont téléchargés, uploader.on ("uploadFinished", function () {console.log ("uploadFinished:");}) // Lorsqu'un fichier est téléchargé dans la réponse du serveur, cet événement sera envoyé pour demander si la réponse du serveur est valide. uploader.on ("uploadaccept", fonction (objet, ret) {// Le serveur a répondu //ret._raw est similaire à dataVar data = json.parse (ret._raw); if (data.resultCode! = "1" && data.resultCode! = "3") {if (data.resultCode == "9") {uploader.Reset (); allert (errorcode "); false;}} else {// e05017uploader.reset (); alert ("error"); return false;}}) // libre lorsque le téléchargement du fichier est réussi. uploader.on ("uploadsuccess", function (file) {$ ("#" + file.id) .find ("p.state"). text ("uploaded");}); uploader.on ("uploadError", function (file) {$ ("#" + file.id) .find ("p.state"). erreur "); uploader.cancelfile (fichier); uploader.removefile (fichier, true); uploader.reset ();}); $ (" # upload "). sur (" cliquez ", fonction () {uploder.upload ();})}); / ***************************************************************************************************************************************************************************. end*********************************************//************************************************WebUpload Multi-file upload begin******************************************************//$(function(){var $list = $("#thelist1");var fileSize = 0; '../../main/js/uploader.swf', serveur: "ContentDetail! Multiupload.action", duplicate: true, // est le même fichier redimensive: false, formdata: {"Status": "Multi", "ContentsDto.ConTtentsId": "0000004730", "uploadnum": "0000004730", "exisflg": 'false'}, compress: null, // l'image n'est pas compressée chunché: true, // shash chunksize: 5 * 1024 * 1024, // 5mchunkretry: false, / 5 * 1024 * 1024, // 5mchunkretry: false, / 5 * 1024 * 1024, // 5mchunkretry: false, 5 * 1024 * 1024, Échec, n'essayez pas à nouveau Threads: 1, // Télécharger le numéro simultané. Le nombre maximum de processus de téléchargement autorisé en même temps. // filenumlimit: 50, // Vérifiez le nombre total de fichiers. S'il le dépasse, il ne sera pas autorisé à rejoindre la file d'attente.// RunTimeOrder: 'Flash', // Désactivez la fonction de glisser-déposer globale. De cette façon, lorsque l'image est traînée dans la page, ouvrez l'image. disablegLobaldnd: true}); // Lorsqu'un fichier est ajouté, uploader.on ("filequeUeEd", function (file) {console.log ("FileQueued:"); $ list.append ("<div id = '" + file.id + "' class = 'item'>" + "<h4 class = 'info'>" + file.name + "</ h4>" + "<p class = 'state'> attendre pour upload ... </ p>" + "</div>");}); // Lorsque le Uploader est démarré, uploader.on ("startupload", function () {console.log ("startupload"); // ajouter des paramètres de formulaire supplémentaires $ .Extend (true, uploader.options.formdata, {"FileSize": FileSize, "MultifIlename": filename.join (","), "FileSizeByOne": FileSizeOnyOne.join (",")});}); // Une fois qu'un fichier a été téléchargé dans la réponse du serveur, cet événement sera envoyé pour demander si la réponse du serveur est valide. uploader.on ("uploadaccept", fonction (objet, ret) {// Le serveur a répondu //ret._raw est similaire à dataconsole.log ("uploadaccept"); console.log (ret); var data = json.parse (ret._raw) "9") {alert ("error"); uploader.reset (); return;}} else {uploader.reset (); alert ("error");}}) uploader.on ("uploadsuccess", function (file) {$ ("#" + file.id) .Find ("p.State"). "uploadError", fonction (fichier, raisonnement) {$ ("#" + file.id) .find ("p.state"). text ("uploadError"); console.log (file); console.log (raison); // plusieurs fichiers var filearray = uploader.getFiles (); pour (var i = 0 ; i <filearray.length; i ++) {uploader.cancelfile (filearray [i]); uploader.removefile (filearray [i], true);} uploader.reset (); fileSize = 0; filename = []; fileSizeByOne = [];}); // lors de l'événement de l'erreur uploader.on ("error", function () {console.log ("error"); uploader.reset (); fileSize = 0; fileName = []; FileSizeByOne = []; alert ("error");}) // Si c'est le bouton de télécharge $ ("# multi .webuploader-pick"). cliquez sur (fonction () {uploader.reset (); fileSize = 0; fileName = []; fileSizeOneByOne = []; $ ("# multi: fichier"). clique {var filearray1 = uploader.getFiles (); pour (var i = 0; i <filearray1.length; i ++) {// Utilisez la taille des fichiers + = filearray1 [i] .size; fileSizeOneByOne.push (filearray1 [i] .size); filename.push (filearray1 [i] .name);} console.log (fileSize); console.log (filename); console.log (fichieryone); console.log (filename);}) Téléchargez * / $ ("input [name = 'multipload']"). sur ("cliquez", fonction () {uploader.upload ();})}); / ******************************************************. fin ************************************************** //***********************************************************************************************************************************************************************************************. LastModifiedDate = [Mer avr 27 2016 16:45:01 GMT + 0800 (Chine Standard Time)], Chunks = [3], Chunk = [0], Type = [Audio / Wav], UID = [Yangl], ID = [WU_FILE_0], SIZE = [268620636], Name = [3.Wav], // FormData Paramètres contenuddo.contentsId = [0000004730], exisflg = [false], status = [file], uploadnum = [0000004730]} **************************************************************************************************************************************************************************************************.6.CONTENTSDETAIL.ACTION
// Code d'arrière-plan de téléchargement de fichier unique public void ajaxattachupload () {string path = "d: // test //" + fileFileName; try {file file = this.getFile (); fileUtil.randomaccessfile (path, fichier); // si le fichier est petit et 5m, la valeur du paramètre Shard est Chunk est nullif (StringUtils.Isempty (Chunk)) {outjson ("0", "Success", "");} else {// Chunk Shard Index, l'indice commence à partir de 0 // "");} else {outjson ("2", "uploading" + fileFileName + "chunk:" + chunk, "");}}} catch (exception e) {outjson ("3", "téléchargement échoué", "");}}Fileutil.java
/ *** Spécifiez l'emplacement pour commencer à écrire le fichier * @Param Tempfile Fichier d'entrée * @Param OutPath Path vers le fichier de sortie (path + nom de fichier) * @throws ioException * / public static void randomaccessfile (string outpath, file tempfile) lance ioException {randomaccessfile raufile = null; tamponInputStream EntréeStream = null; try {file dirfile = null; Fichier (outpath); // ouvrez le fichier cible dans la lecture et l'écriture de rafile = new randomaccessfile (dirfile, "rw"); rafile.seek (rafile.length ()); inputStream = new bufferedInputStream (new FileInputStream (tempfile)); byte [] buf = new Byte [1024]; int lard = 0; while ((longueur = inputStream.read (buf))! = -1) {rafile.write (buf, 0, longueur);}}. IoException (e.getMessage ());} enfin {try {if (inputStream! = Null) {inputStream.close ();} if (rafile! = Null) {rafile.close ();}} catch (exception e) {throw new ioException (e.getMessage ());}}} 7. Image d'effet
Ce qui précède est la connaissance pertinente de la méthode de téléchargement de fichiers volumineux, de fichiers uniques et de plusieurs fichiers dans Java introduits par l'éditeur. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!