web-dev-qa-db-fra.com

Restreindre les types de fichiers dans la démo de téléchargement de fichiers JQuery

J'utilise démo de téléchargement de fichier JQuery pour mon prochain projet avec Codeigniter. Quelqu'un peut-il me dire comment atteindre les objectifs suivants:

  • Restriction des types de fichiers de téléchargement vers .Zip et .rar
  • Restreindre la taille du fichier
  • Effacement de la liste des fichiers téléchargés (le plugin de téléchargement de fichiers JQuery affiche la liste des fichiers déjà téléchargés)

Aide appréciée !!

jquerycodeigniterfile-uploadblueimp
22
Faisal Memon

vous avez probablement une pléthore de solutions maintenant, cependant je voulais utiliser le plugin BASIC pour l'uploader jquery, c'est-à-dire sans aucun autre script .. pour une raison quelconque, les options maxFileSize/fileTypes ne fonctionnaient pas - mais c'est surtout sans doute à mon manque de lire la documentation!

Quoi qu'il en soit pour moi, c'était aussi rapide que de faire ce qui suit:

    add: function (e, data) {
        var goUpload = true;
        var uploadFile = data.files[0];
        if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(uploadFile.name)) {
            common.notifyError('You must select an image file only');
            goUpload = false;
        }
        if (uploadFile.size > 2000000) { // 2mb
            common.notifyError('Please upload a smaller image, max size is 2 MB');
            goUpload = false;
        }
        if (goUpload == true) {
            data.submit();
        }
    },

Donc, il suffit d'utiliser l'option ADD pour autoriser uniquement les types d'images dans l'expression régulière et de vérifier (dans mon cas) la taille du fichier est de 2 Mo maximum.

Plutôt basique, et encore une fois je suis sûr que les options maxFileSize fonctionnent, je n'inclus que le script de plugin de base jquery.fileupload.js

EDIT J'aurais dû ajouter dans mon cas que je télécharge un seul fichier (une image de profil) donc d'où les data.files [0] .. vous pouvez itérer à travers la collection de fichiers bien sûr.

67
Dav.id

Dans jquery.fileupload-ui.js éditez cette partie:

   $.widget('blueimp.fileupload', $.blueimp.fileupload, {

    options: {
        // The maximum allowed file size:
        maxFileSize: 100000000,
        // The minimum allowed file size:
        minFileSize: undefined,
        // The regular expression for allowed file types, matches
        // against either file type or file name:
        acceptFileTypes:  /(Zip)|(rar)$/i,
        ----------------------------------------------------------------

Pour effacer la liste des fichiers téléchargés - Supprimez l'appel $ .getJSON de main.js si vous n'avez pas besoin de cette fonctionnalité.

7
Potheek

Selon la documentation officielle;

$('#file_upload').fileUploadUIX({
    maxFileSize: 5000000, // Maximum File Size in Bytes - 5 MB
    minFileSize: 100000, // Minimum File Size in Bytes - 100 KB
    acceptFileTypes: /(Zip)|(rar)$/i  // Allowed File Types
});
3
blasteralfred Ψ

Une autre façon de procéder est la suivante.

 $('#upload').fileupload({ 
       change: function (e, data) { 
                if (!(/\.(jpg|jpeg|png|pdf)$/i).test(data.files[0].name)) {
                    alert('Not Allowed');
                    return false;
                }
        } 
 });
1
shana