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

この記事では主に Jquery アップロード プラグイン webupload の使用方法を詳しく紹介します。興味のある方は参考にしてください。

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

このプラグインは使いやすく、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アップロードプラグインの使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。