jsドラッグ＆ドロップアップロードについて【アバターを修正するためのドラッグ＆ドロップアップロードの流れ】

現在、多くの最新ブラウザはすでにドラッグ アンド ドロップによるファイル読み取り操作をサポートしており、その利点は今後も繰り返されることはありません。フロントエンドでは、ドラッグアンドドロップを使用してウェブサイトのアバターアップロードプロセスを改善し、重要なポイントと実際の経験をまとめました。

まず全体的なビューを見てみましょう:

1. ファイルのドラッグ アンド ドロップ受け入れ領域は明確にマークされ、できるだけ大きくする必要があります (レイアウト上の理由により、ドラッグ アンド ドロップはこのインターフェイスのドロップ ボックスは大きくありません)。破線ボックスやその他のスタイルを使用して、ユーザーをファイルのドラッグ アンド ドロップに誘導できます。わかりやすいテキスト プロンプトとアイコンを用意するのが最善です。

2. インタラクティブなエクスペリエンスでは、ファイルをブラウザ ウィンドウにドラッグすると、ドラッグ アンド ドロップ領域を使用して背景色などを変更し、ユーザーにドロップ操作を促すことができます。
実装コード:

doc.bind({ 'dragenter':function(e){ $("#brsbox").addClass("dragbrowse"); dropbox.addClass("shine"); return false; }, 'dragleave':function(e){ dropbox.removeClass("shine"); return false; }, 'drop':function(e){ stopdft(e);} }); dropbox.bind({ 'dragenter':function(e){ dropbox.addClass("candrop"); stopdft(e);}, 'dragleave':function(e){ dropbox.removeClass("candrop"); stopdft(e);}, 'dragover':function(e){ stopdft(e);}, 'drop':function(e){ }

ドラッグ アンド ドロップをサポートしていないブラウザの場合:

残念ながら、IE9 などの最新のブラウザを含む一部のブラウザは、ファイルのドラッグ アンド ドロップ読み取りをサポートしていません。したがって、ドラッグ アンド ドロップをサポートしていないブラウザのバックアップ ソリューションとして、通常のファイルの参照とアップロードを準備する必要があります。
ドラッグアンドドロップによるファイルの読み込みがサポートされていない場合、インターフェイスは次のようになります:

検出を実装するコードは次のとおりです:

it.detectDragable = function(){ filedrag = !!window.FileReader; if(!filedrag) return; $("#avtcnt").addClass('dragable');

ファイル配置時の処理:

ファイルを配置するときマウスでドラッグ＆ドロップしたファイルが単一であるか複数であるかに関係なく、ブラウザとオペレーティング システム間で転送される e.dataTransefer.ファイルは常に複数です。つまり、複数のファイルです。これは、マウスによって運ばれるファイルをループする必要があることも意味します。
コードは次のとおりです:

dropdom.addEventListener('drop',function(e){ it.handlefile(e.dataTransfer.files); stopdft(e);},false); }; it.handlefile = function(files){ var noimg = 0; for(var i=0; i
        

         ログイン後にコピー
        
       

ブラウザにドラッグされたファイルの処理


stopdft(e) は、デフォルトでブラウザがファイルを開けないようにするためのものです。代わりに、スクリプトはドラッグ アンド ドロップされたファイルを処理します。
このプロセスでは画像ファイルが必要なので、e.dataTransfer.files オブジェクトを操作して画像タイプのファイルを見つけると便利です。
そうでない場合は、プロンプトが表示されます。

ファイルを読み取るためのキーコード:
var Reader = new FileReader();


reader.onload = function(e){
var img = document.createElement('img'); ;
};
reader.readAsDataURL(file); この例では、画像の高さと幅の属性を読み取る必要があります。そこで以下の操作を行いました
setTimeout(function(){
it.imgSize = {
w:img.width,
h:img.height
};
},500);ただし、イメージが実際に読み取られることを確認するためにはまだ遅延が発生します。そうしないと、一部のブラウザでは幅と高さの値が取得できない場合があります。 (他にもっと簡単な方法はありますか?ご指摘ください)

既存の写真を削除してドラッグ領域をリセット:
ローカルの写真を参照して読み取った後、ユーザーに削除とリセットのオプションを提供します。 (もちろん直接アップロードした方が楽ですが)

it.resetDropbox = function(){ dropbox.attr("class","dropbox") .empty() .text("将文件拖拽至此区域"); imgData = ''; it.imgData = ''; it.imgSize = {w:0,h:0}; picsub.removeClass("uploading") .find("button").removeAttr("disabled") .text("上传"); imagedata.val(''); clearner.hide();

画像のアップロードと変更の通常のプロセスは次のとおりです: 画像を選択 - 画像をアップロード - アップロードが正常に完了 - サーバーが画像を返す - クライアントのブラウジング効果
ドラッグ アンド ドロップを使用して読み取る場合ローカル ファイルを保存すると、サーバーから画像を返す手順を保存して、reader.result によって返されたデータを直接使用できます。
これにより、サーバーから画像を読み取る際の遅延がなくなり、往復のデータトラフィックが節約されます。したがって、サーバー側の画像アップロードが成功し、画像プレビューがローカル データを取得できることを確認するだけです。
コード:

function initImageCrop(url){ var t = document.getElementById("target"), p = document.getElementById("preview"), b = browseImage, s = [], ts = []; if(url=='data'){ t.src = b.imgData; p.src = b.imgData; posImage(b.imgSize.w,b.imgSize.h); }else{ var cutimg = new Image(); cutimg.onload = function(){ t.src = url; p.src = url; posImage(cutimg.width,cutimg.height); } cutimg.src = url;