jsドラッグ＆ドロップアップロードについて【アバターを変更するドラッグ＆ドロップアップロードの手順】_javascriptスキル

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

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

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');

ファイル配置時の処理:

ファイルが許容可能な領域に配置されると、マウスでドラッグ アンド ドロップしたファイルが 1 つであるか複数であるかに関係なく、

e.dataTransefer.files がブラウザとオペレーティング システムの間で転送されることに注意してください。常に複数形です。つまり、複数のファイルです。これは、マウスによって運ばれるファイルをループする必要があることも意味します。 コードは次のとおりです:

コードをコピーしますコードは次のとおりです:

dropdom.addEventListener ('drop',function(e){
it.handlefile(e.dataTransfer.files);
stopdft(e);},false); ;

it.handlefile = function(files){
var noimg = 0;
for(var i=0; ivar file = files [i];
if(!file.type.match(/image*/)){
noimg ;
if(noimg ==files.length){
QSL.optTips('他の形式の画像を選択します');
return
}
Continue

var Reader = new FileReader(); .onload = function(e ){
var img = document.createElement('img');
img.src = Reader.result;
setTimeout(function(){
it.imgSize = {
w: img.width,
h:img.height
},500);
dropdom.innerHTML=""; ';
it .imgData = Reader.result;
dropdom.appendChild(img);
dropbox.addClass("droped") ;
show();
readAsDataURL(ファイル);
Processing files dragged to the browser


The stopdft(e) is to prevent the browser from opening the file by default. Instead, the script handles the dragged and dropped files.
In this process, we need image files, so it is convenient to operate the e.dataTransfer.files object to find files of type image.
If not, it will prompt.

Key code for reading files:
var reader = new FileReader();


reader.onload = function(e){
var img = document. createElement('img');
img.src = reader.result;
};
reader.readAsDataURL(file);
In this example we need to read the height and width attributes of the image. So we did the following operations
setTimeout(function(){
it.imgSize = {
w:img.width,
h:img.height
};
}, 500);
Although it is reading a local file, there is still a delay to ensure that the image is actually read. Otherwise, the width and height values ​​may not be obtained in some browsers. (Is there any other easier method? Please point it out)

Delete existing images and reset the drag area:
After browsing and reading local images, provide users with options to delete and reset. (Of course it is easier to upload directly)

Copy code The code is as follows:

it.resetDropbox = function(){
dropbox.attr("class","dropbox")
.empty()
.text("Drag files to this area");
imgData = '' ;
it.imgData = '';
it.imgSize = {w:0,h:0};
picsub.removeClass("uploading")
.find("button"). removeAttr("disabled")
.text("Upload");
imagedata.val('');
clearner.hide();

Reset drag Area


The process of dragging and dropping to read files is basically completed here.
Other advantages of using drag and drop to read local files:
The ordinary process of uploading and changing pictures is: select the picture-upload the picture-upload successfully-the server returns the picture-client browsing effect
And if you use drag-and-drop Reading local files can save the step of returning pictures from the server and directly use the data returned by reader.result.
This saves the delay in reading images from the server and saves round-trip data traffic. So just confirm that the server-side image is uploaded successfully and the image preview retrieves local data:
Code:

Copy code The code is as follows:

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;

Processing after the image is uploaded successfully

Full DEMO preview(Static files are not displayed after the upload is successful (:)
DEMO script