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

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

栗子：

 <inuput type="file" id="myfile" οnchange=" ">

 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属性，这是完成打印的一步。

}

 

转载于:https://www.cnblogs.com/ZM-ONE/p/8301628.html