js は、画像を貼り付けてアップロードするための Ctrl+V を実装します (Chrome、Firefox、IE11 と互換性があります)_JavaScript スキル

誰もが多かれ少なかれさまざまなリッチテキストエディタを使用していますが、その中には画像をコピーしてテキストボックスに貼り付けると、画像がアップロードされるので、これは便利です。実装されましたか？

原理分析
抽出操作: copy=>paste=>upload
この操作中に行う必要があるのは、貼り付けイベントをリッスン => クリップボード内のコンテンツを取得 => アップロード要求を送信することだけです。 以下の内容を簡単に理解するには、まずいくつかの点を理解する必要があります:

• アップロードできるのは、Web ページの写真 (Web ページ上の写真を右クリックしてコピー) とスクリーンショット (スクリーンショット ツールで撮影した写真、例: qq スクリーンショット) のみです。貼り付けてアップロードすることはできません。システム内の画像 (コンピュータのデスクトップからハードディスクにコピーされたもの) は、まったく異なる場所に存在します。
• スニッピングツールでキャプチャした画像は、Webページ上で右クリックしてコピーした画像とは若干異なるため、加工方法も異なります。
• 貼り付けイベントに注意してください: 貼り付け (右クリックで貼り付け/ctrl+v) 操作を実行すると、このアクションは「貼り付け」という名前のクリップボード イベントをトリガーします。このイベントは、次の場合にトリガーされます。カッティング ボード上のデータを対象要素の前に挿入します。ターゲット要素 (カーソルがある場所) が編集可能な要素 (例: contenteditable 属性が設定された div。Textarea は機能しません。) の場合、貼り付けアクションにより、クリップボード内のデータがターゲット要素に挿入されます。 ; ターゲット要素が編集できない場合、データは挿入されませんが、貼り付けイベントはトリガーされます。貼り付けプロセス中、データは読み取り専用です。この段落は、w3.org_the-paste-action から翻訳されたものです。
• 残念ながら、テストの結果、chrome (最新バージョン)、firefox (最新バージョン)、ie11 でのペースト イベントの実装が w3c に完全に準拠していないことが判明しました。独自の違いがあります (w3c ペースト標準はドラフト段階にのみあります)。
  

テストコードとスクリーンショットは次のとおりです:

クロム:

<textarea ></textarea> 
<div contenteditable style="width: 100px;height: 100px; border:1px solid"> 
</div> 
<script> 
document.addEventListener('paste', function (event) { 
  console.log(event) 
})
</script>

1. event有clipboardData属性，且clipboardData有item属性，clipboardData.item中的元素（对象）有type和kind属性；
2. 无论在哪进行粘贴，均可触发paste事件；
3. 在div（未特殊声明时，本文div均指设置了contenteditable属性的div） 里粘贴截图，不显示图片。img.src为base64编码字符串；
4. 在div里粘贴网页图片，直接显示图片，img.src为图片地址。

firefox：

1. event有clipboardData属性，clipboardData没有item属性；
2. 只有在textarea里或者可编辑的div（里才粘贴才触发paste事件；
3. 在div里粘贴截图，直接显示图片，img.src为base64编码字符串；
4. 在div里粘贴网页图片，表现同chrome。
   

ie11：（不截图了，可自行试验，其他浏览器同理b4d92b8d0d10f967e1cabc607dfe08a0npm intall=>node app.js)

以上就是本文的全部内容，希望对大家的学习有所帮助。