1。ファイルAPI ：（ファイルAPI）
ファイルタイプフォームコントロールで選択された各ファイルはファイルオブジェクトであり、FileListオブジェクトは、選択したすべてのファイルを表すこれらのファイルオブジェクトのコレクションリストです。ファイルオブジェクトは、バイナリRAWデータを表すBLOBオブジェクトから継承し、バイト内の元のデータブロックにアクセスするためのスライス方法を提供します。要するに、ファイルオブジェクトにはFlielistオブジェクトが含まれ、ファイルオブジェクトはBlobオブジェクトから継承されます！
各オブジェクトの関連属性関係：
FileReaderインターフェイス：
図からわかるように、HTML5はFileReaderインターフェイスも提供します。ファイルをメモリに読み取り、ファイル内のデータを読み取るために使用します。
var reader = new fileReader（）;
このインターフェイスには、4つの方法と合計6つのイベントがあります。
•readasbinarystring（file）：ファイルをバイナリとして読み取ります
•readasdataurl（file）：ファイルdataurlを読み取ります
•readastext（file、[encoding]）：ファイルをテキストとして読み取ります
•約（なし）：ファイルの読み取りを割り当てます
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
•Onabort：ファイル割り込みを読み取るときにトリガーされます
•onerror：ファイルが読み取られたときにエラーが発生したときにトリガーされます
•onloadstart：ファイルの読み取りが起動するときにトリガーされます
•Onprogress：ファイルを読んでもトリガーを続けます
•オンロード：ファイルが正常に読み取られたときにトリガーされます
•onloadend：ファイルの読み取りの最後にトリガーされます（成功と失敗の両方がトリガーされます）
上記のイベントパラメーターeには、e.target.resultまたはthis.resultポイントがあります。
2。APIをドラッグアンドドロップします：
ドラッグアンドドロップ属性：ドラッグしてtrueにドロップする必要がある要素のドラッグ可能な属性を設定します（radable =” true”）！ IMG要素と要素は、デフォルトでドラッグしてドロップできます。
ドラッグアンドドロップイベント：（ドラッグアンドドロップ要素イベントとターゲット要素イベントにセグメント化されています）
要素イベントをドラッグアンドドロップします：
•Dragstart：ドラッグする前にトリガーされます
•ドラッグ、ドラッグの前後に連続的にトリガーします
•ドラッグエンド、ドラッグエンドトリガー
ターゲット要素イベント：
•Dragenter、ターゲット要素を入力してトリガーします
•ターゲットに入ってターゲットを離れるまで、継続的にトリガーするまでのドラッグオーバー
•ターゲット要素のトリガー、ドラッグリーブ
•ドロップして、ターゲット要素にマウストリガーを解放します
しかし！ターゲット要素では、DragoverおよびDropイベントでデフォルトの動作をブロックする（ドラッグオーバーとドロップを拒否されます）、ドラッグとドロップを実装できないことに注意してください。
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
DatAtransferオブジェクト：ドラッグアンドドロップ中に運ばれるデータを保存するために特別に使用されます。ドラッグアンドドロップイベントのDatAtransferプロパティとして設定できます。
3つの属性：
•effectAllowed：カーソルスタイルを設定します（なし、コピー、copylink、copylove、link、linkmove、move、all and uninitialized）
•effectAllowed：ドラッグアンドドロップ操作の視覚効果を設定する
•タイプ：保存されたデータの種類、文字列の擬似アレイ
•ファイル：外部ドラッグされたファイルを取得し、ファイルリストリストを返し、ファイルリストの下にタイプ属性があり、ファイルタイプを返します
4つの方法：
•setData（）：データキーと値を設定します（文字列である必要があります）
•getData（）：データを取得し、キー値に従って対応する値を取得します。
•ClearData（）：DatAtransferオブジェクトに保存されているデータをクリアします
•SetDragImage（ImageUrl、log X、long Y）：IMG要素を使用して、ドラッグアンドドロップアイコンを設定します
//例：
Target.AddeventListener（ 'Dragstart'、function（e）{
var fs = e.datatransfer.files; //ドラッグアンドドロップファイルオブジェクトリストFlielistオブジェクトを取得
var dt = e.datatransfer; //ドラッグアンドドロップイベントとしてのDatatRansferプロパティ
dt.effectallowed = 'copy';
dt.setdata（ 'text/plain'、 'hello'）;
dt.setDragimage（dragicom、-10、-10）;
}）;
3.ドラッグアンドドロップアップロード画像プレビュー：
アイデア：
1。ターゲット要素をドラッグするファイルの4つのイベントに精通しています。注：デフォルトの動作は、OndragoverおよびOndropイベントでブロックされています。
2。ドラッグしてドロップした後、ファイルオブジェクトコレクションを入手してください：e.datatransfer.files
3.コレクション内のすべてのファイルオブジェクトをループし、ファイルの種類とファイルサイズを判断し、タイプが指定されている場合は対応する操作を実行します。
4.ファイル情報の読み取りオブジェクト：dataurl：readasdataurl（ファイルオブジェクト）などのファイルオブジェクトの読み取りなどのメソッド、読み取り成功後にトリガーされたイベントなどのメソッドがあります。
5。FilReaderオブジェクトのいくつかのイベントで対応する論理処理を実行する
HTML：
<div> <p>この領域に画像ファイルをドラッグしてください！ </p> </div>
合計負荷数：<SPAN ID = 'Total'> 100 </span>
JQ：
<script type = "text /javascript"> $（function（）{ / *思考： *1。ファイルドラッグターゲットのターゲット要素の4つのイベントに精通している。指定されたタイプ*4 dataurl：readasdataurl（ファイルオブジェクト）の読み取りなどのメソッドがあり、読み取りが成功した後にトリガーされます。 $（ "。conterer"）。 op.html（ '画像ファイルをこの領域にドラッグしてください！'）。コレクション// long.log（fs.length）; cropel.log（fs [i] .size）; $（ "＃total"）。html（e.total）; oimg.attr（src "、odiv）;アップロード、ajaxはファイルを送信し、バイナリファイルをアップロード}}} else {alert（ '画像ファイルをアップロードしてください！'）}}}）; </script>複製画像：
概要：ドラッグアンドドロップイベントAPI、DatAtransferオブジェクト、およびファイルリーディングオブジェクトフィルリストなどの知識を組み合わせて、画像の単純なドラッグアンドドロップアップロードのプレビュー効果を実現します。オブジェクトの関係と使用法を知り、実装のアイデアを明確にする必要があります！
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。