h5 그림 미리 보기 구현

h5는 두 가지 방법으로 그림의 미리보기를 실현할 수 있다. 즉, 임의의 그림이 지정된 구역으로 가면 그림이 나타난다.
첫 번째:



var pic=document.getElementsByClassName('pic')[0];
pic.οndragοver=function(e){//
e.preventDefault();
e.stopPropagation();
return false;
}
pic.οndrοp=function(e){
var file=e.dataTransfer.files[0];
console.log(file);
const read=new FileReader();
read.readAsDataURL(file);//
read.οnlοad=function(e){
console.log(this.result);
if(/image/.test(this.result)){
const img=new Image();
img.src=this.result;
img.style.width="300px";
img.style.height="300px";
pic.appendChild(img);
}
}
e.preventDefault();//
e.stopPropagation();
return false;
}

두 번째는 블로브.



var pic=document.getElementsByClassName('pic')[0];
pic.οndragοver=function(e){
e.preventDefault();
e.stopPropagation();
return false;
}
pic.οndrοp=function(e) {
var file = e.dataTransfer.files[0];
console.log(file);
//
if (/image/.test(file.type)) {
const blob = new Blob([file]);
const url = window.URL.createObjectURL(blob);
console.log(url);
const img = new Image();
img.src = url;
img.style.width = '300px';
img.style.height = '300px';
img.onload = function () {
pic.appendChild(img);
}
e.preventDefault();
e.stopPropagation();
return false;
}
}

h5 그림 미리 보기 구현

좋은 웹페이지 즐겨찾기