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 图片上传前预览的更多相关文章

  1. input file实现多选,限制文件上传类型,图片上传前预览功能

    限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...

  2. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  3. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  4. 【转】html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  5. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  6. 【转】HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

  7. HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...

  8. HTML5 FileReader实现图片上传前预览

    如果你的浏览器支持Html5的FileReader的话,实现图片上传前进行预览是一件非常容易之事情. 在控制器,创建一个视图Action: jQuery代码: 实时演示一下: 下面内容于2014-11 ...

  9. 图片上传前预览、压缩、转blob、转formData等操作

    直接上代码吧: <template> <div> <div class="header">添加淘宝买号</div> <div ...

  10. jq 图片上传前预览

    html: <div class="form_upload"> <input type="file" id="uploadImg&q ...

随机推荐

  1. Postgresql架构体系解析

    一.PostgreSQL物理架构 postgresql的物理架构非常简单,它由共享内存.一系列后台进程和数据文件组成. 二.Shared Memory 共享内存是服务器服务器为数据库缓存和事务日志缓存 ...

  2. centos7 开机自启动脚本

    两种实现方式 方法1:(rc.local) 1.因为在centos中/etc/rc.d/rc.local的权限被降低了,所以需要赋予其可执行权 chmod +x /etc/rc.d/rc.local ...

  3. VMware-查看虚拟机版本

    [root@localhost /]# uname -a Linux localhost.localdomain 3.10.0-327.el7.x86_64 #1 SMP Thu Nov 19 22: ...

  4. 设置点击事件时Unable to preventDefault inside passive event listener due to target being treated as passive

    问题 当使用fastClick.js设置点击事件时,控制台报错: [Intervention] Unable to preventDefault inside passive event listen ...

  5. 使用clipboard.js复制文字+图片到微信后图片不显示问题处理

    使用clipboard.js复制文字 +图片,粘贴到微信不显示图片,而QQ可以. 解决方案:图片链接使用http,不要使用https. 使用clipboard.js实现复制功能 文字 +图片到微信客户 ...

  6. 人脸识别:face_recognition初尝试

    在学习face_recognition之前先看git上的另一个项目:face_collection .face_collection某种程度上可以看做是demo,便于我们更好的理解和使用face_re ...

  7. Pycharm去除白色波浪线

  8. composer 换源

    #首先把默认的源给禁用掉 composer config -g secure-http false #再修改镜像源 这里我使用阿里的源 composer config -g repo.packagis ...

  9. 初学银河麒麟linux笔记 第一章 虚拟机、麒麟系统、QT安装与运行

    由于手头一个项目的QT软件开发需要在银河麒麟系统上运行,借此机会开始从头学习linux系统 首先下载虚拟机VMware 16和麒麟系统iso,这里参考的 https://blog.51cto.com/ ...

  10. 【QT】打包QT程序

    发布QT程序时需要把依赖的库拷贝到程序所在文件夹下,可以使用如下方式: 命令行输入cmd,cd 到程序所在文件夹,输入windeployqt xx.exe --release 注xx.exe是程序的名 ...