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.file은 항상 복수형입니다. 즉, 파일이 여러 개입니다. 이는 또한 마우스에 의해 운반된 파일을 반복해야 함을 의미합니다.
코드는 다음과 같습니다.

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<files.length; i++){ 
var file = files[i]; 
if(!file.type.match(/image*/)){ 
noimg ++; 
if(noimg ==files.length){ 
QSL.optTips(&#39;请选择jpg, png, gif 等格式的图片&#39;); 
return false; 
} 
continue; 
} 

var reader = new FileReader(); 
reader.onload = function(e){ 
var img = document.createElement(&#39;img&#39;); 
img.src = reader.result; 
setTimeout(function(){ 
it.imgSize = { 
w:img.width, 
h:img.height 
}; 
},500); 
dropdom.innerHTML=""; 
img.className =&#39;localimg&#39;; 
it.imgData = reader.result; 
dropdom.appendChild(img); 
imagedata.empty().val(reader.result); 
dropbox.addClass("droped"); 
clearner.show(); 
}; 
reader.readAsDataURL(file); 

}

브라우저로 드래그한 파일 처리


stopdft(e)는 기본적으로 브라우저가 파일을 열지 못하게 하는 것입니다. 대신 스크립트는 끌어서 놓은 파일을 처리합니다.
이 과정에서는 이미지 파일이 필요하므로 e.dataTransfer.files 객체를 조작하여 이미지 유형의 파일을 찾는 것이 편리합니다.
그렇지 않은 경우 메시지가 표시됩니다.

파일 읽기를 위한 키 코드:
var reader = new FileReader();


reader.onload = function(e){
var img = document. ('img');
img.src = reader.result;
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;

이미지가 성공적으로 업로드된 후 처리

js에 대해 자세히 알아보기 드래그 앤 드롭 업로드 [아바타 업로드 및 수정을 위한 드래그 앤 드롭 프로세스] 관련 기사는 PHP 중국어 웹사이트를 주목하세요!