jQueryアップロードプラグインwebuploadの使い方を詳しく解説

WebUploader は、HTML5 に基づいて Baidu WebFE (FEX) チームによって開発され、FLASH によって補完された、シンプルでモダンなファイル アップロード コンポーネントです。主流の IE ブラウザを放棄することなく、最新のブラウザで HTML5 の利点を最大限に活用でき、オリジナルの FLASH ランタイムを使用し、IE6 以降、iOS 6 以降、Android 4 以降と互換性があります。 2 つのランタイム セットの呼び出し方法は同じであり、ユーザーが選択できます。大きなファイルを断片的に同時にアップロードすると、ファイルのアップロード効率が大幅に向上します。この記事では主に Jquery アップロード プラグイン webupload の使い方を詳しく紹介します。興味のある方はぜひ参考にしてください。

このプラグインは使いやすく、ajaxfileupload よりも強力な機能を備えています。公式 Web サイトからダウンロードできます。

現在、プロジェクトでは画像の一括アップロード機能のみが使用されています。公式のサンプルを独自のプロジェクトに移行する方法は次のとおりです。

// 实例化
 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.独自のバックエンドへ 処理クラスは、HttpFileCollection files = System.Web.HttpContext.Current.Request.Files; を通じてプラグインによってアップロードされた画像を取得します。

2. サンプルプログラムはデフォルトで圧縮を有効にします。これは、画像が一定のサイズよりも大きい場合に、圧縮が必要ない場合に、圧縮を追加する必要があります。

3、

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

写真をアップロードする公式の例では、なぜ写真のフィルタリングがコメントアウトされているのかわかりませんが、アップロードしたいファイルが写真のみを選択できる場合は、削除する必要があります。コメント

4. 画像のピクセルサイズの判定を追加しました。自分で使用してください。uploadAccept メソッドを使用すると、画像が送信されてからバックグラウンドで判定されます (もっと良い方法があるのではないかと思います)。プラグイン自体はファイルを処理できますが、ピクセル属性を個別に取得することはありません。 例:

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

このメソッドが false を返すと、画像のアップロードが失敗するため、背景によってピクセルが決定され、変更されます。バックグラウンドから返されるステータスを通じて画像のアップロード ステータスを確認します。

関連する推奨事項:

jQuery での webupload アップロード プラグインの使用例

webuploader がサンプル コードをアップロードするかどうかを決定する

webuploader の 10 のコンテンツ推奨事項

以上がjQueryアップロードプラグインwebuploadの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。