ホームページ ウェブフロントエンド jsチュートリアル jQueryのアップロード関数webuploadの使い方

jQueryのアップロード関数webuploadの使い方

Aug 07, 2017 pm 03:54 PM
jquery 説明書

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

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

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

現在、プロジェクトでは画像の一括アップロード機能のみが使用されています。公式のサンプルを独自のプロジェクトに移行する方法は次のとおりです。処理クラスは、HttpFileCollection files = System.Web.HttpContext.Current.Request.Files; を通じてプラグインによってアップロードされた画像を取得します。

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

3、

// 实例化
 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
 });
ログイン後にコピー

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

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

accept: {
  title: 'Images',
  extensions: 'gif,jpg,jpeg,bmp,png',
  mimeTypes: 'image/*'
  },
ログイン後にコピー
このメソッドが false を返すと、画像のアップロードが失敗するため、背景によってピクセルが決定され、変更されます。バックグラウンドから返されるステータスを通じて画像のアップロード ステータスを確認します。

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

DirectX修復ツールの使い方は? DirectX修復ツールの詳しい使い方 DirectX修復ツールの使い方は? DirectX修復ツールの詳しい使い方 Mar 15, 2024 am 08:31 AM

DirectX 修復ツールは専門的なシステム ツールであり、その主な機能は現在のシステムの DirectX 状態を検出することであり、異常が見つかった場合は直接修復できます。 DirectX 修復ツールの使い方がわからないユーザーも多いと思いますので、以下の詳細なチュートリアルを見てみましょう。 1. 修復ツール ソフトウェアを使用して修復検出を実行します。 2. 修復の完了後、C++ コンポーネントに異常な問題があることを示すメッセージが表示された場合は、[キャンセル] ボタンをクリックし、[ツール] メニュー バーをクリックしてください。 3. [オプション] ボタンをクリックし、拡張機能を選択して、[拡張機能の開始] ボタンをクリックします。 4. 拡張が完了したら、再検出して修復します。 5. 修復ツールの操作が完了した後も問題が解決しない場合は、エラーを報告したプログラムをアンインストールして再インストールしてみてください。

Baidu Netdisk の使用方法 - Baidu Netdisk の使用方法 Baidu Netdisk の使用方法 - Baidu Netdisk の使用方法 Mar 04, 2024 pm 09:28 PM

Baidu Netdisk の使い方をまだ知らない友人も多いので、以下では編集者が Baidu Netdisk の使い方を説明しますので、必要な場合は急いでご覧ください。ステップ 1: Baidu Netdisk をインストールした後、直接ログインします (図を参照); ステップ 2: 次に、ページのプロンプトに従って [マイ共有] と [転送リスト] を選択します (図を参照); ステップ 3: 「 「友達共有」では、写真やファイルを友達と直接共有できます (図を参照); ステップ 4: 次に、「共有」を選択し、コンピューター ファイルまたはネットワーク ディスク ファイルを選択します (図を参照); 5 番目のステップ 1:次に、友達を見つけることができます (写真に示すように); ステップ 6: 「機能宝箱」で必要な機能を見つけることもできます (写真に示すように)。以上、編集者の意見です

KMS アクティベーション ツールとは何ですか? KMS アクティベーション ツールの使用方法は? KMS アクティベーション ツールの使用方法は? KMS アクティベーション ツールとは何ですか? KMS アクティベーション ツールの使用方法は? KMS アクティベーション ツールの使用方法は? Mar 18, 2024 am 11:07 AM

KMS ライセンス認証ツールは、Microsoft Windows および Office 製品のライセンス認証に使用されるソフトウェア ツールです。 KMS は KeyManagementService の略で、鍵管理サービスです。 KMS ライセンス認証ツールは、KMS サーバーの機能をシミュレートして、コンピューターが仮想 KMS サーバーに接続して Windows および Office 製品をライセンス認証できるようにします。 KMS ライセンス認証ツールは、サイズが小さく、機能が強力です。ワンクリックで永続的にライセンス認証できます。インターネットに接続せずに、あらゆるバージョンのウィンドウ システムとあらゆるバージョンの Office ソフトウェアをライセンス認証できます。現在、最も成功しているツールです。頻繁に更新される Windows ライセンス認証ツール 今日はそれを紹介します kms ライセンス認証作業を紹介します

ポットプレイヤーの使い方 - ポットプレイヤーの使い方 ポットプレイヤーの使い方 - ポットプレイヤーの使い方 Mar 04, 2024 pm 06:10 PM

Potplayer は非常に強力なメディア プレーヤーですが、まだ Potplayer の使い方を知らない友達も多いので、今日は Potplayer の使い方を詳しく紹介して、皆さんのお役に立てればと思います。 1. PotPlayer のショートカット キー: PotPlayer プレーヤーのデフォルトの共通ショートカット キーは次のとおりです: (1) 再生/一時停止: スペース (2) 音量: マウス ホイール、上下の矢印キー (3) 進む/戻る: 左右の矢印キー (4) ブックマーク: P- ブックマークの追加、H-ビューブックマーク (5) フルスクリーン/復元: Enter (6) 複数の速度: C-加速、7) 前/次のフレーム: D/

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常​​、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエスト メソッドを使用した具体的なコード例です。まず、jQuery ライブラリ ファイルが含まれていることを確認してから、$.ajax({u

Xiaoma win7 アクティベーション ツールの使用方法 - Xiaoma win7 アクティベーション ツールの使用方法 Xiaoma win7 アクティベーション ツールの使用方法 - Xiaoma win7 アクティベーション ツールの使用方法 Mar 04, 2024 pm 06:16 PM

Xiaoma win7 アクティベーション ツールを使用しているユーザーは多いと思いますが、Xiaoma win7 アクティベーション ツールの使い方をご存知ですか?次に、Xiaoma win7 アクティベーション ツールの使用方法をエディターが説明します。ぜひ次の記事へ行って見てみましょう。最初のステップは、システムを再インストールした後、「マイ コンピュータ」に移動し、上部メニューの「システムのプロパティ」をクリックして、Windows のライセンス認証ステータスを確認することです。 2 番目のステップでは、クリックして win7 アクティベーション ツールをオンラインでダウンロードし、クリックして開きます (どこでも利用できるリソースが多数あります)。 3 番目のステップは、Xiaoma ライセンス認証ツールを開き、[Windows を完全にライセンス認証する] をクリックすることです。 4 番目のステップは、アクティベーション プロセスがアクティベーションを完了するまで待機することです。ステップ 5: Windows のライセンス認証ステータスを再度確認し、システムがライセンス認証されていることを確認します。

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキスト コンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリ ファイルを導入し、次のコードがページに導入されていることを確認する必要があります: &lt

jQuery を使用してすべての a タグのテキスト コンテンツを変更する jQuery を使用してすべての a タグのテキスト コンテンツを変更する Feb 28, 2024 pm 05:42 PM

タイトル: jQuery を使用して、すべての a タグのテキスト コンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンク タグ (タグ) のテキスト コンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。

See all articles