前端图片预览方法

图片预览方法图片预览现在大多基于HTML5提供的接口FileReader，FileReader为我们提供了四种方法1.readAsArrayBuffer：result属性中的二进制数据缓冲区2.readAsBinaryString：result属性中包含文件的原始二进制数据3.readAsDataURL：result属性会包含一个data:URL格式的字符串，表示读取文件的内容。4.readAsText：result属性会包含一个字符串，表示要读取的文件内容。1：其中，image必须实现预览需要使用readAsDataURL方法将image转为base64方式。之后我们将base64字符串赋值给img的src属性，就可以实现图片预览代码如下//htmlPleaseselectanimagefile://jsvarinput=document.querySelector('#file_input');input.onchange=function(){readfile(input.files[0],(e)=>{varsrc=e.target.result;varimg=newImage();img.src=src;document.body.appendChild(img);})}//将图片转换成base64格式functionreadfile(blob,callback){varreader=newFileReader();读者.onload=回调；reader.readAsDataURL(blob);二：我们也可以使用对象URL中的方法createObjectURL()来实现图片预览，代码如下接下来varinput=document.querySelector('#file_input');input.onchange=function(){varimg=newImage();img.src=window.URL.createObjectURL(input.files[0]);文档。body.appendChild(img);}三：我们也可以通过拖拽实现图片预览，代码如下//必须禁止浏览器的默认行为drop.ondraenter=function(e){e.preventDefault();}drop.ondragover=function(e){e.preventDefault();}drop.onleave=function(e){e.preventDefault();}drop.ondrop=function(e){e.preventDefault();//获取文件对象数组varfs=e.dataTransfer.files;varreader=newFileReader();reader.onload=function(e){varimg=newImage();img.src=e.target.result;//图像的宽高设置为和拖拽框一样img.width=drop.clientWidth;img.height=drop.clientHeight;drop.appendChild(img);}reader.readAsDataURL(fs[0]);}