input file 图片上传前预览
1.获取到这个File对象之后就可以获取到上传文件的一些属性,比如:lastModified(代表文件的修改日期,而非上传日期)、name、size(单位是b)、type(例如图片就是"image/png",然后我们可以根据image来判断是否是图片)等。
2.fileReader对象获取文件信息,常用方法及事件。
- readAsDataURL() 方法。//将文件读取为base64的格式,也就是可以当成图片的src
- result 属性 //将读取的数据保存在result里。
- progress 事件 //定时触发,来获取当前已上传文件的大小,如进度条。
- loade 事件 //文件上传完成时触发。
- loadend 事件 //文件上传完成时(不管成功、失败)触发。
3.事例
1、页面上传,预览。
<form id="test" action="" method="post" enctype="multipart/form-data">
<img src="" id="image-preview" width="200">
<p>
<input type="file" id="image-file" name="test" onchange="fileUpload()">
</p>
<p id="file-info"></p>
</form>
2、js实现fileUpload()。
<script>
function fileUpload(){
var
fileImage = document.getElementById('image-file'),
info = document.getElementById('file-info');
debugger;
// 清除历史图片:
document.getElementById('image-preview').src = '';
// 检查文件是否选择:
if(!fileImage.value) {
info.innerHTML = '没有选择文件';
return;
}
// 获取File引用:
var file = fileImage.files[0];
//判断文件大小
var size = file.size;
if(size >= 1*1024*1024){
alert('文件大于1兆不行!');
return false;
}
// 获取File信息:
info.innerHTML = '文件: ' + file.name + '<br>' +
'大小: ' + file.size + '<br>' +
'修改时间: ' +file.lastModifiedDate.getFullYear()+'年'+ (file.lastModifiedDate.getMonth()+1)+'月'+file.lastModifiedDate.getDay()+'日';
if(file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
return;
}
// 读取文件:
var reader = new FileReader();
// 以DataURL的形式读取文件:
reader.readAsDataURL(file);
reader.onload = function(e) {
document.getElementById('image-preview').src=this.result;
};
console.log(file);
}
</script>
input file 图片上传前预览的更多相关文章
- input file实现多选,限制文件上传类型,图片上传前预览功能
限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...
- html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- 【转】html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- ASP.NET MVC图片上传前预览
回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...
- 【转】HTML5 jQuery图片上传前预览
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...
- HTML5 jQuery图片上传前预览
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...
- HTML5 FileReader实现图片上传前预览
如果你的浏览器支持Html5的FileReader的话,实现图片上传前进行预览是一件非常容易之事情. 在控制器,创建一个视图Action: jQuery代码: 实时演示一下: 下面内容于2014-11 ...
- 图片上传前预览、压缩、转blob、转formData等操作
直接上代码吧: <template> <div> <div class="header">添加淘宝买号</div> <div ...
- jq 图片上传前预览
html: <div class="form_upload"> <input type="file" id="uploadImg&q ...
随机推荐
- Postgresql架构体系解析
一.PostgreSQL物理架构 postgresql的物理架构非常简单,它由共享内存.一系列后台进程和数据文件组成. 二.Shared Memory 共享内存是服务器服务器为数据库缓存和事务日志缓存 ...
- centos7 开机自启动脚本
两种实现方式 方法1:(rc.local) 1.因为在centos中/etc/rc.d/rc.local的权限被降低了,所以需要赋予其可执行权 chmod +x /etc/rc.d/rc.local ...
- VMware-查看虚拟机版本
[root@localhost /]# uname -a Linux localhost.localdomain 3.10.0-327.el7.x86_64 #1 SMP Thu Nov 19 22: ...
- 设置点击事件时Unable to preventDefault inside passive event listener due to target being treated as passive
问题 当使用fastClick.js设置点击事件时,控制台报错: [Intervention] Unable to preventDefault inside passive event listen ...
- 使用clipboard.js复制文字+图片到微信后图片不显示问题处理
使用clipboard.js复制文字 +图片,粘贴到微信不显示图片,而QQ可以. 解决方案:图片链接使用http,不要使用https. 使用clipboard.js实现复制功能 文字 +图片到微信客户 ...
- 人脸识别:face_recognition初尝试
在学习face_recognition之前先看git上的另一个项目:face_collection .face_collection某种程度上可以看做是demo,便于我们更好的理解和使用face_re ...
- Pycharm去除白色波浪线
- composer 换源
#首先把默认的源给禁用掉 composer config -g secure-http false #再修改镜像源 这里我使用阿里的源 composer config -g repo.packagis ...
- 初学银河麒麟linux笔记 第一章 虚拟机、麒麟系统、QT安装与运行
由于手头一个项目的QT软件开发需要在银河麒麟系统上运行,借此机会开始从头学习linux系统 首先下载虚拟机VMware 16和麒麟系统iso,这里参考的 https://blog.51cto.com/ ...
- 【QT】打包QT程序
发布QT程序时需要把依赖的库拷贝到程序所在文件夹下,可以使用如下方式: 命令行输入cmd,cd 到程序所在文件夹,输入windeployqt xx.exe --release 注xx.exe是程序的名 ...