首页 > > 网页制作 > Javascript >

js图片预览（一张图片预览）

2018-06-24 01:19:20来源：未知阅读 ()

核心思想：无论是一张图片上传还是多图上传，首先我们都需要先获得图片对象.

栗子：

var myfiles = document.getElementById("myfile");

接着我们使用URL.createObjectURL()方法获取选中的文件，语法：URL.createObjectURL(object.options);

即： var url = URL.createObjectURL(myfiles.files[0]);在我们获取文件的URL.createObjectURL(myfiles.files[0])之后，将他赋值给url。

接着我们定义存放预览图片的img，<img id="myimg" > 这里我们暂时不添加src属性，如果添加，在没有上传之前就会显示一个找不到图片的样式。

然后我们将url赋值给定义的img标签的src属性

即：document.getElementById("myimg").src=url;

到这里一张图片上传就完成了。我们接下来上源码：

html部分：

 <input type="file" id="myfile" onchange="mypit()">
 <img id="myimg">
 

js部分：

 function mypit() {
 var myfiles = document.getElementById("myfile"); //获取点击按钮的对象
 var url = '';
 url = window.URL.createObjectURL(myfiles.files[0]); //获取forms中的文件，并赋值给url，每次调用URL.crreateObjectURl方法时，都会创建一个对象。
 document.getElementById("myimg").src = url; //获取img标签对象的src，并将url赋值给img标签的src属性，这是完成打印的一步。
 }