h 5画像プレビューを実現
2053 ワード
h 5は、任意のピクチャが指定された領域に表示されるピクチャのプレビューを実現する2つの方法がある.
1つ目:
2つ目はBlobで
1つ目:
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;
}
2つ目はBlobで
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;
}
}