Input File 选中图片直接预览显示在IMG标签内

2017-12-02 15:02

Web

0 字

几秒读完

  $("#fuPoster").change(function (event) {
 // 根据这个 <input> 获取文件的 HTML5 js 对象
 var files = event.target.files, file;
 if (files && files.length > 0) {
 // 获取目前上传的文件
 file = files[0];
 // 来在控制台看看到底这个对象是什么
 console.log(file);
 // 那么我们可以做一下诸如文件大小校验的动作
 if (file.size > 1024 * 1024 * 5) {
 alert('图片大小不能超过 5MB!');
 return false;
 }
 // !!!!!!
 // 下面是关键的关键，通过这个 file 对象生成一个可用的图像 URL
 // 获取 window 的 URL 工具
 var URL = window.URL || window.webkitURL;
 // 通过 file 生成目标 url
 var imgURL = URL.createObjectURL(file);
 $("#imgPoster").attr("src", imgURL);
 }
 })