Js实现input上传图片并显示缩略图

用这个方法就可以很方便快捷的实现上传图片并显示缩略图的效果：

FileReader 的 readAsDataURL()

先创建一个img标签，再用 fileReader 把input文件的赋值到img的src即可

具体代码如下：

function previewFile() {var preview = document.querySelector('img');var file    = document.querySelector('input[type=file]').files[0];var reader  = new FileReader();reader.onloadend = function () {preview.src = reader.result;}if (file) {reader.readAsDataURL(file);} else {preview.src = "";}
}
<input type="file" οnchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

转载于:https://www.cnblogs.com/xiaokele1314/p/8991361.html

Js实现input上传图片并显示缩略图相关推荐

php中上传图片怎么显示出来,PHP上传图片类显示缩略图功能
有缩略图功能但是感觉不全面,而且有点问题,继续学习,将来以后修改下 /** * Created by PhpStorm. * User: Administrator * Date: 2016/6/ ...
原生JS使用input上传图片
使用Jquery上传头像 new formData来完成file上传 <form action="" id="forms"><h3>& ...
上传图片并显示缩略图的最简单方法(c#)
private void fileUpload_Click(object sender, System.EventArgs e) { // 模拟数据库里取出by ...
Django Admin 上传多张图片并显示缩略图
Django Admin 上传多张图片并显示缩略图文章目录 Django Admin 上传多张图片并显示缩略图 1.效果预览 2.自定义Widget 3.定义模型和模型表单 3.1 定义模型 3.2 ...
上传图片显示扫描效果html5,JS+HTML5实现上传图片预览效果完整实例【测试可用】...
本文实例讲述了JS+HTML5实现上传图片预览效果.分享给大家供大家参考,具体如下: 在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件 ...
如何实现上传图片并显示图片？
如何实现上传图片并显示图片? 平时在注册或者填写完整个人信息的时候都会遇见上传个人图片的情况,那么你有没有想过这个该如何实现的呢?在以前还没有学到这个知识之前,就觉得好神奇,在网上居然能做到上传图片的 ...
element upload预览_vue+element上传图片并显示预览图
html代码: :show-file-list="false" :on-success="handleAvatarSuccess" :on-change=&qu ...
input上传图片；input上传file；vue上传图片。
需求:上传图片并获取base,用的是input file功能上传注意点:input上传相同文件不触发的原因.需要将inputDOM.value = null (不过置空后 29行的打印就看不到 e ...
easyui下拉框option写死_JavaScript_jQuery+easyui中的combobox实现下拉框特效，1.第一种写法：Input框中显示： - phpStudy...
jQuery+easyui中的combobox实现下拉框特效 1.第一种写法:Input框中显示: 2. 第二种用法,在list列表中显示: 类别 3. 第二种的另一种写法: 类别以上3种方法均可实 ...
layui复选框：被js操作checked切换并显示状态（含案例、代码）
文章目录 layui复选框:被js操作checked切换并显示状态 (含案例.代码) 案例 · 应用 · 截图: 案例 · 代码: 背景 · 设置: 使用说明: layui复选框:被js操作check ...

Js实现input上传图片并显示缩略图

Js实现input上传图片并显示缩略图相关推荐

最新文章

热门文章