FileUpload est un grand composant de téléchargement de fichiers écrit en JavaScript pur à l'étranger. Ce composant prend en charge des fonctions telles que le téléchargement de Shard, la continuation des points d'arrêt et plusieurs fichiers.
Voici un moyen d'utiliser le modèle personnalisé du composant de téléchargement de fichiers (fineuploaderBasic):
Ce qui suit est le code de configuration:
Configuration frontale:
<! - Button de définition -> <div id = "Basic_uploader_fine"> <i> </i> Sélectionnez le fichier </div> <div id = "TriggerUpload"> Cliquez pour télécharger </ div> <! - Afficher les informations -> <div id = "Messages"> </ div> <div id = "AnnulerSload"> Annuler </v> <div id = "Cancelall"> Annuler tout al upload </div> <div id = "continupload"> Continuer le téléchargement </div> <cript> $ (document) .ready (function () {$ fub = $ ('# Basic_uploader_fine'); $ messages = $ ('# messages'); var uploader = new QQ.FineuploadErBasic ({# bouton: // Tulter sur le mode debug multiplié: true: true, // multiple $ fub [0], // Télécharger le bouton Autouplload: false, // Si vous ne téléchargez pas automatiquement, appelez la méthode uploadStoredFileSS pour télécharger manuellement // Vérifiez la validation du fichier de téléchargement: {allowedextensions: [jPEG ' 'Server / endpoint.php'}, réessayer: {enableauto: false // par défaut est false automatiquement réessayer}, chunking: {activé: true, partiSize: 500, // Taille de groupe, par défaut est 2M concurrent: {EndPoint: "Server / endpoint. Traitement}}, // Callback Fonction Callbacks: {// Fichier démarre Télécharger OnSubmit: Function (id, nom de fichier) {$ messages.append ('<div id = "File-' + id + '" style = "margin: 20px 0">' + filename + '</ div>'); id) .addclass ('alert-info') .html ('<img src = "client / charging.gif">' + 'initialisation' + '' '');}, // Bar de progression ONPROGRESS: fonction (id, nom de fichier, chargé, total) {if (chargé <total) {Progress = math.round (chargé / total * 100) + '% de' + Math.Round (Totalound (charged / Total * 100) + '% of' + Math.Round (total) 1024) + 'kb'; $ ('# file-' + id) .reMoveClass ('alert-info') .html ('<img src = "http://img.zcool.cn/community/01ff275629d096ac725b2c8e95102.gif" else {$ ('# file-' + id) .AddClass ('alert-info') .html ('<img src = "http://img.zcool.cn/community/01ff2756629d096ac725b2c8e95102.gif">' + ' Le téléchargement est terminé surcomplete: function (id, nom de fichier, réponsejson) {if (réponsejson.success) {var img = réponsejson ['cible'] $ ('# file-' + id) .removeclass ('alert-info') .adddclass ('alert-success') .html ('<i> </ i> '' '+ FileName +' '');} else {$ ('# file-' + id) .reMoveClass ('Alert-Info') .AddClass ('error avec' + '' '+ filen +': '+ Responsejson.Error); Maybexhrorxdr) {console.log (id + '_' + name + '_' + raisonnement);},}}); uplower.cancel (0);}); uploader.pauseupload (0);});Code PHP:
//Handler.php Fichier Site Web OFFICIEL DE NIFFÉRENCE DE LA FICHIPE DE LA FICHIPE " // Limite Limite $ uploader-> sizelimit = null; // Téléchargez la boîte de fichiers $ uploader-> inputName = "qqfile"; // définir l'emplacement de stockage des fichiers groupés $ uploder-> chunksfolder = "chunks"; $ méthode = $ _server ["request_method"]; Handler.php Code et ajout d'une règle de génération de dossiers [vous pouvez également le personnaliser]) $ uploadDirectory = $ uploader-> getPathName ('membre_avatar'); if ($ method == "post") {header ("contenu-type: text / plain"); // fusionne le groupe une fois le téléchargement de groupe terminé if (isset ($ _ get ["fait"])) {$ result = $ uploader-> combinechunks ($ uploadDirectory); // Merge Fichiers groupés} else {// start Téléchargez le fichier $ result = $ uploader-> handleupload ($ uploadDirectory); // Obtenez le nom téléchargé $ result ["uploadName"] = $ uploader-> getUploadName (); } echo json_encode ($ result);} // supprimer le traitement de fichiers else if ($ method == "Delete") {$ result = $ uploader-> mandeledElete ($ uploadDirectory); echo json_encode ($ result);} else {header ("Http / 1.0 405 Méthode non autorisée");}Ce qui précède est une configuration de modèle personnalisée simple, j'espère qu'elle sera utile à l'apprentissage de chacun.