web前端实现上传土图片并且预览效果

1 - web实现图片上传并且预览

这里利用了createObjectURL来获取图片的URL地址进行预览显示

效果图
web前端实现上传土图片并且预览效果_第1张图片
image.png
全部代码




    
    input实现图片上传并且预览



    
第一步:写一个图片上传操作标签,一个图片预览的标签

html部分:
写一个input type="file" 的标签,一个图片预览的img标签;在input中写一个方发onchange="handleUpload(this)" 并且将当前对象this传入(这里的this是指input这个dom对象)

    
第二步:处理上传了的图片

javascript部分:
步骤:点击上传图片 > 触发了handleUpload方法并且得到input的对象 > 通过getObjectURL方法获取到图片的URL地址 > 最后在img标签上预览显示出来

 

你可能感兴趣的:(web前端实现上传土图片并且预览效果)