考虑到用户体验， 网页的图片上传数据库前，先预览是很有必要的一个步骤，第一可以给用户带来安全感，第二防止图片文件有问题而提交到数据库，占用存储资源。
那么要实现预览有两种方式：一种是用window.url.createobjecturl方法对选择的图片数据（可以勉强理解为input的value）生成一个blob对象路径，第二种是用获取 filereader读取器。
那么无论那种方法，首先都得得到文件数据，获得文件数据是从files集合中获取。
方式一：
代码如下：
我要评论
<input type=file id="inp">
<script>
inp.onchange=function(){
var file=this.files[0] // 获取input上传的图片数据;
var img=new image() ;
url=window.url.createobjecturl(file) // 得到bolb对象路径，可当成普通的文件路径一样使用，赋值给src;
img.src=url;
//其实也可一句代码搞定，不需要声明那么多变量；img.scr=window.url.cteateobejecturl(this.files[0]) ;
然后把img添加到页面就实现预览了
}
<script>
方式二：
用filerader对像读取文件.可分为四步；1、创建filereader对像；2、调用readasdataurl方法读取文件；3、调用onload事件监听，我们一需要拿到完整的数据，但我们又不知道文件何时读完？，所以需要第三步监听；4、通过filerader对像r的result属性拿到读取结果。
代码如下：
<input type=file id="inp">
<input type=file id="inp">
<script>
inp.onchange=function(){
var read=new filereader() // 创建filereader对像;
read.readasdataurl(this.files[0]) // 调用readasdataurl方法读取文件;
read.onload=function(){
url=read.result // 拿到读取结果;
var img=new image();
img.src=url;
div.appendchild(img);
}
}
以上所述是小编给大家介绍的js实现图片预览的几种方式，希望对大家有所帮助
如对本文有疑问， 点击进行留言回复！！
JavaScript中某一标签内函数用this获取不到当前标签的问题笔记
MSAL.js 2.0发布 支持授权代码流 (authorization code flow)
网友评论