input type=file 选择图片并且实现预览效果
通过<input />标签，给它指定type类型为file，可提供文件上传；
accept：可选择上传类型，如：只要传图片，且不限制图片格式，为image/*；
multiple：规定是否可以选择多个文件；
规定只可上传图片，且可以选择多个文件
<input type="file" accept="image/*" multiple="multiple"/>
当然，直接一个input type=file 只能选择上传的文件/资源，如果我们需要在选择图片之后，在当前页面实现预览效果，那么我们可以如下方式来实现
HTML代码
<body>
<div id="box">
<img id="imgshow" src="" alt=""/>
</div>
<div id="pox">
<input id="filed" type="file" accept="image/*"/>
</div>
</body>
css样式文件
<style>
#box{
width: 300px;
height: 300px;
border: 2px solid #858585;
}
#imgshow{
width: 100%;
height: 100%;
}
#pox{
width: 70px;
height: 24px;
overflow: hidden;
}
</style>
JS代码
<script>
//在input file内容改变的时候触发事件
$('#filed').change(function(){
//获取input file的files文件数组;
//$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
//这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
var file = $('#filed').get(0).files[0];
//创建用来读取此文件的对象
var reader = new FileReader();
//使用该对象读取file文件
reader.readAsDataURL(file);
//读取文件成功后执行的方法函数
reader.onload=function(e){
//读取成功后返回的一个参数e，整个的一个进度事件
console.log(e);
//选择所要显示图片的img，要赋值给img的src就是e中target下result里面
//的base64编码格式的地址
$('#imgshow').get(0).src = e.target.result;
}
})
</script>
*以上js代码中有使用到jQuery，因此要引入jQuery文件
input type=file 选择图片并且实现预览效果的更多相关文章
- input type=file 选择图片并且实现预览效果的实例
为大家带来一篇input type=file 选择图片并且实现预览效果的实例. 通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型, ...
- html input type=file 选择图片,图片预览 纯html js实现图片预览
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js 获取input type="file" 选择的文件大小、文件名称、上次修改时间、类型等信息
文件名的传递 ---全路径获取 $('#file').change(function(){ $('#em').text($('#file').val()); }); 文件名的传递 ---只获取文件名 ...
- Html5选择图片并及时预览图片
以往想要实现图片预览基本都是先传至服务器后等返回链接地址才能进行预览,使用Html5选择图片并及时预览图片的代码如下,使用起来更爽了. <!DOCTYPE html> <html l ...
- vue使用readAsDataURL实现选择图片文件后预览
vue实现选择图片文件后预览 利用h5的api可以实现选择文件并实现预览 readAsDataURL 方法会读取指定的 Blob 或 File 对象.读取操作完成的时候,readyState 会变成已 ...
- 用html5文件api实现移动端图片上传&预览效果
想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象 Blob表示原始二进制数据,Html5的file对象就继 ...
- input type=file实现图片上传，预览以及图片删除
背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...
- input[type="file"]的图片预览
在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件先上传上去然后返回地址再显示在页面上,这样就不太好,因为用户基本信息可能并没有保存,但 ...
- input file图片上传预览效果
两种方法,方法一: js代码: //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $ ...
随机推荐
- [Balkan 2007] Mokia
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1176 [算法] CDQ分治 + 树状数组即可 时间复杂度 : O(Nlog^2N) ...
- AtCoder Grand Contest 007 E：Shik and Travel
题目传送门:https://agc007.contest.atcoder.jp/tasks/agc007_e 题目翻译 现在有一个二叉树,除了叶子每个结点都有两个儿子.这个二叉树一共有\(m\)个叶子 ...
- bzoj 3809 Gty的二逼妹子序列——莫队+分块
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3809 容易想到树状数组维护值域.但修改和查询都是 log 太慢. 考虑有 nsqrt(n) ...
- HDU1203(01背包变形)
I NEED A OFFER! Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u D ...
- 错误 128 无法将类型“string”隐式转换为“System.Windows.Forms.DataGridViewTextBoxColumn”
原因是DataGridView中列的Name属性值和DataPropertyName属性值一样,比如Name="CardID",DataPropertyName="Car ...
- 安装和配置Rose HA
安装和配置Rose HA 1.1.1 安装Rose HA 将roseha的三个安装文件拷贝到/data/install, 便于两台主机的安装. 在没有安装Rose HA 之前,分别修改hosts文件将 ...
- samba 安装运行
samba 安装步骤 1.若之前有安装过相关软件包,先卸载之:sudo apt-get autoremove samba samba-commonsudo apt-get autoremove sys ...
- vim vi Ubuntu 设置
1. 在vi编辑模式下按退格键不能删除内容,按方向键不能上下左右移动?如果是则:一 在vi里非编辑模式下按冒号进入到末行命令模式,然后输入set nocompatible,回车,然后在进入vi编辑模式 ...
- intellj idea 使用
1. 导入包快捷 Alt + Enter 2. 查看方法注释,点击进入源码即可,若想和eclipse一样鼠标停留即可出现注释提示,开启方法为: Preferences->Editor->G ...
- mysql 、redis的区别
我们知道,mysql是持久化存储,存放在磁盘里面,检索的话,会涉及到一定的IO,为了解决这个瓶颈,于是出现了缓存,比如现在用的最多的 memcached(简称mc).首先,用户访问mc,如果未命中,就 ...