コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > 本文

画像アップロード プラグイン ImgUploadJS: HTML5 ファイル API を使用して、スクリーンショットの貼り付けアップロードとドラッグ アンド ドロップでアップロードを実装する _html5 チュートリアル スキル

WBOY
リリース： 2016-05-16 15:46:08
オリジナル
3542 人が閲覧しました
1. 背景と効果

現在、インターネット上にアップロードされるファイルのほとんどは画像ファイルですが、従来の Web 画像のスクリーンショットをアップロードするには、次の手順が必要です。 スクリーンショットを保存 -> パスを選択 -> ; 保存してから、「アップロード」>「パスの選択」>「アップロード」>「挿入」をクリックします。
画像ファイルのアップロードには、パスを選択してから ->アップロード ->挿入する必要があります。手順は複雑ですが、スクリーンショットの貼り付けアップロードとドラッグ アンド ドロップによるアップロードがサポートされている場合は、インターネット エクスペリエンスが重要です。大きく改善されるでしょう。
現在、Zhihu と Github は両方とも最新のブラウザー向けにこれら 2 つの機能をサポートしています。私は何もすることがなかったときにこれらの機能を実装することを学びました。今日は、この 1kb プラグインがどのような機能を実装しているのか、その使用方法とその原理について説明します。 。
まず挿入エフェクトを見てみましょう:
スクリーンショットを撮ったら、それを直接貼り付けてアップロードします。

ドラッグアンドドロップしてアップロード

http ネットワーク


2. 使用例
直接呼び出し:
XML/HTML コードコンテンツをクリップボードにコピー
  1. <div id="box" スタイル="幅: 800px; 高さ: 400px; ボーダー: 1px ソリッド;" contenteditable="true">div>
  2. <スクリプト type="text/ javascript" src="UploadImage.js">スクリプト>
  3. new UploadImage("box", "UploadHandler.ashx").upload(function (xhr) {//アップロード完了後のコールバック
  4. var img = new Image();
  5. img.src = xhr.responseText; this.appendChild(img);
    6. });
AMD/CMD


XML/HTML コードコンテンツをクリップボードにコピー

  1. <div id="box" スタイル="width: 800px; height: 400px; border: 1px solid;" contenteditable="true">div>
  2. <スクリプト type="text/ javascript" src="require.js">スクリプト>
  3. <スクリプト>
  4. require(['UploadImage'], function (UploadImage) {
  5. new UploadImage("box", "UploadHandler.ashx").upload(function (xhr) {//上传完了後の回调
  6. var img = new Image();    
  7. img.src = xhr.responseText;    
  8. this.appendChild(img);    
  9. });    
  10. })
  11. スクリプト>


三.浏览器サポート
現在のバージョンのみ以下、浏览器、今後さらに多くの浏览器をサポートする可能性があります。
•IE11
•Chrome
•FireFox
•Safari(未测式，理论应该サポート)
四.原理および源码
1.粘贴上传
处理目标容器（id）の貼り付けイベントは、e.clipboardData 内のデータを取得します。図の場合は、次の処理が実行されます。
を使用して H5 File API(FileReader) でファイルの Base64 コードを取得し、FormData 上に送信します。
2.
は対象コンテナ（id）のドロップ イベントを処理し、図の場合は e.dataTransfer.files（H5 ファイル API: FileList）内のデータを取得し、FormData を構築します。
以下は初版の本コードです。これ以上は説明しません。
部核心コード

XML/HTML コード复制コンテンツ到剪贴板
  1. 関数 UploadImage(id, url, key)
  2. {
  3. this.element = ドキュメント.getElementById(id);
  4. this.url = url; //バックエンド画像処理のパス
  5. this.imgKey = key || "PasteAreaImgKey"; // バックエンドに指定された名前
    6. }
  7. UploadImage.prototype.paste = 関数 (コールバック、formData)
    8. {
    9. var
  9. あれ = これ; this.element.addEventListener('paste', function (e) {//ターゲット コンテナ (id) の貼り付けイベントを処理します
  10. if (e.clipboardData && e.clipboardData.items[0].type.indexOf('image')
    11. >
  11. -1) { var
    12. あれ
  12. = これ,
    13. リーダー
  13. = new FileReader(); file
    14. = e.clipboardData.items[0].getAsFile();//e.clipboardData のデータを読み取ります: Blob オブジェクト
  14. reader.onload
    15. =
  15. function (e) { //リーダーの読み取りが完了した後、xhr がアップロードされます var xhr
    16. =
  16. new XMLHttpRequest(), fd
    17. =
  17. formData || (新しい FormData());; xhr.open('POST', thatthat.url, true); xhr.onload
    18. =
  18. 関数
    19. () {
  19. callback.call(that, xhr) }
    20. fd.append(thatthat.imgKey, this.result); // this.result は画像の Base64 を取得します
    21. xhr.send(fd);
  21. }
  22. reader.readAsDataURL(file);//base64 エンコードを取得
  23. }
  24. }、偽);
    25. }
関連ラベル：
ドラッグアンドドロップでアップロード
ソース：php.cn
前の記事：HTML5 ラージ ファイル ブレークポイントの再開実装方法_html5 チュートリアル スキル 次の記事：HTML5 History API は更新不要の Jump_html5 チュートリアル スキルを実装します
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
v-model の電子メール値をメソッドに渡します こんにちは。入力に v-model を渡して電子メールを送信して検証をリセットしようとしていますが、入力から sendPasswordResetEmail に正しく渡す方法がわかり...
から 2024-04-05 10:04:40
0
1
405
Ajax と PHP を使用して CodeIgniter に複数の画像ファイルをアップロードする 複数の画像ファイルをサーバー側にアップロードするのに問題があります。誰かがコードのどこが間違っているのかを指摘してくれると助かります。最初は HTML コードがあります: <...
から 2024-04-03 22:35:03
0
1
318
WooCommerce Checkout - ユーザーの役割とカートの内容を検証する WooCommerce のチェックアウト プロセスで問題が発生しています。通常商品とB2B商品を区別するために「B2BforWooCommerce」プラグインを使用しています。シナ...
から 2024-04-03 11:58:52
0
1
475
PDF ファイルを Flutter にアップロードして MySQL データベースに保存する方法 私は Flutter と mysql を初めて使用したばかりで、どこから始めればよいのかわかりません。作り方を知っている人がいたら説明してください。ありがとう！ ！誰かがこのページ...
から 2024-04-02 21:43:05
0
1
317
パブリック フォルダー外のファイルにアクセスできるように Vite を設定するにはどうすればよいですか? 私はこのファイル構造を持っています: 私のプロジェクト アプリケーション ブートストラップ構成データベース ノード モジュール pdfjs-dist ビルド pdf.js パブリッ...
から 2024-04-02 12:39:53
0
1
397
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート