Anwendungsbeispiel für das Webupload-Upload-Plug-in in jQuery

Dieser Artikel stellt hauptsächlich die Verwendung des Jquery-Upload-Plug-Ins Webupload im Detail vor. Es hat einen gewissen Referenzwert.

WebUploader wurde vom Baidu WebFE (FEX)-Team entwickelt Datei-Upload-Komponente, die auf Basis von HTML5 entwickelt und durch FLASH ergänzt wurde. Es kann die Vorteile von HTML5 in modernen Browsern voll ausnutzen, ohne den Mainstream-IE-Browser aufzugeben. Es verwendet die ursprüngliche FLASH-Laufzeit und ist mit IE6+, iOS 6+ und Android 4+ kompatibel. Die beiden Laufzeitsätze verfügen über dieselbe Aufrufmethode und können vom Benutzer ausgewählt werden. Die Verwendung großer Dateifragmentierung und gleichzeitiger Uploads verbessert die Effizienz des Datei-Uploads erheblich.

Dieses Plug-in ist einfach zu verwenden und verfügt über leistungsfähigere Funktionen. Es ist leistungsfähiger als Ajaxfileupload. Sie können es von der offiziellen Website herunterladen.

Derzeit wird im Projekt nur die Funktion zum Hochladen von Bildern verwendet. Die offiziellen Beispiele wurden ausführlich beschrieben. So migrieren Sie die offiziellen Beispiele in Ihr eigenes Projekt:

// 实例化
 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. Der Server wird in eine eigene Hintergrundverarbeitungsklasse geändert, um die vom Plug-in hochgeladenen Bilder über die Anforderung HttpFileCollection files = System.Web.HttpContext.Current.Request.Files abzurufen .Dateien.

2. Das Beispielprogramm aktiviert standardmäßig die Komprimierung. Wenn das Bild größer als eine bestimmte Größe ist, kann es automatisch komprimiert werden. false, Attribut

3.

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

Ich weiß nicht, warum die Bildfilterung auskommentiert ist Wenn Sie eine Datei hochladen möchten, können Sie nur Bilder auswählen. Sie müssen die Kommentare entfernen. 4. Die Beurteilung der Pixelgröße des Bildes wurde hinzugefügt. Ich habe das Bild dann übermittelt Ich habe es im Hintergrund beurteilt. (Ich frage mich, ob es einen besseren Weg gibt.) Da die Dateiklasse des Plug-Ins selbst Dateien verarbeiten kann, erhält sie die Pixelattribute nicht separat. Beispiel:

Wenn diese Methode „false“ zurückgibt, führt dies dazu, dass der Bild-Upload fehlgeschlagen ist. Daher bestimmt der Hintergrund die Pixel und verwendet den vom Hintergrund zurückgegebenen Status, um den Bild-Upload-Status zu ändern.

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

Das obige ist der detaillierte Inhalt vonAnwendungsbeispiel für das Webupload-Upload-Plug-in in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!