Exemple d'utilisation du plug-in de téléchargement webupload dans jQuery

Cet article présente principalement en détail l'utilisation du plug-in de téléchargement Jquery webupload. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

WebUploader est développé par l'équipe Baidu WebFE (FEX) Un simple et moderne. Composant de téléchargement de fichiers développé sur la base de HTML5 et complété par FLASH. Il peut exploiter pleinement les avantages du HTML5 dans les navigateurs modernes sans abandonner le navigateur IE traditionnel. Il utilise le runtime FLASH d'origine et est compatible avec IE6+, iOS 6+, Android 4+. Les deux ensembles de runtimes ont la même méthode d'appel et peuvent être sélectionnés par l'utilisateur. L'utilisation du téléchargement simultané de fichiers volumineux par fragments améliore considérablement l'efficacité du téléchargement de fichiers.

Ce plug-in est facile à utiliser et possède des fonctions plus puissantes que ajaxfileupload. Vous pouvez le télécharger depuis le site officiel.

Actuellement, seule la fonction de téléchargement par lots d'images est utilisée dans le projet. Les exemples officiels ont été écrits de manière très détaillée. Voici comment migrer les exemples officiels vers votre propre projet :

<.>

// 实例化
 uploader = WebUploader.create({
  pick: {
  id: '#filePicker',
  label: '点击选择图片'
  },
  formData: {
  uid: 123
  },
  dnd: '#dndArea',
  paste: '#uploader',
  swf: '../../dist/Uploader.swf',
  chunked: false,
  chunkSize: 512 * 1024,
  server: '../../server/fileupload.php',
  // runtimeOrder: 'flash',

  // accept: {
  // title: 'Images',
  // extensions: 'gif,jpg,jpeg,bmp,png',
  // mimeTypes: 'image/*'
  // },

  // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
  disableGlobalDnd: true,
  fileNumLimit: 300,
  fileSizeLimit: 200 * 1024 * 1024, // 200 M
  fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M
 });

1. Le serveur est modifié dans sa propre classe de traitement en arrière-plan pour obtenir les images téléchargées par le plug-in via la requête HttpFileCollection = System.Web.HttpContext.Current.Request.Files ; .Fichiers.

2. L'exemple de programme active la compression par défaut. Cela peut être défini lorsque l'image est plus grande qu'une certaine taille, il peut automatiquement compresser l'image si la compression n'est pas requise, vous devez ajouter une compression : false, attribut

3.

accept: {
  title: 'Images',
  extensions: 'gif,jpg,jpeg,bmp,png',
  mimeTypes: 'image/*'
  },

L'exemple officiel de téléchargement de photos Je ne sais pas pourquoi le filtrage des images est commenté Si. vous souhaitez télécharger un fichier, vous ne pouvez sélectionner que des images. , vous devez supprimer les commentaires

4. Ajout du jugement sur la taille des pixels de l'image. J'ai utilisé la méthode uploadAccept et j'ai soumis l'image. puis je l'ai jugé en arrière-plan. (Je me demande s'il existe un meilleur moyen) Étant donné que la classe de fichiers du plug-in elle-même peut traiter les fichiers, elle n'obtient pas les attributs des pixels séparément. Exemple :

Lorsque cette méthode renvoie false, cela entraînera l'échec du téléchargement de l'image, donc l'arrière-plan détermine les pixels et modifie l'état de téléchargement de l'image via l'état renvoyé par l'arrière-plan.

 uploader.on('uploadAccept', function (object, ret) {
 
  var resJson = $.parseJSON(ret._raw);
  if (resJson.result == "error") {
   alert(object.file.name + "象素太低，请检查上传！");
   return false;
  }
 
  });

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!