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. pip使用阿里云镜像

    pip config set global.index-url https://mirrors.aliyun.com/pypi/simple/ pip config set install.trust ...

  2. mysql 根据父id查询下级所有数据

    select id,apply_resource_name from ( select t1.id,t1.apply_resource_name, if(find_in_set(parent_id, ...

  3. K8s集群安全机制

    安全机制说明 k8s作为一个分布式集群管理的工具,保证集群的安全性是其一个重要的任务.API Server是集群内部各个组件通信的中介,也是外部控制的入口,,所以K8s的安全机制就是围绕保护API S ...

  4. OpenGL错误记录

    OpenGL3之--三角形(无法解析的外部符号 __imp__glClear@4,该符号在函数 _main 中被引用) 添加头文件 #include <GL/glut.h>

  5. 数据库多表连接查询中使用group by分组语句,Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column 'XXX' which is not functionally dependent on columns in GROUP BY claus

    需求描述: 要是用两表联合查询,并对查询的结果进行分组:sql如下: 1 SELECT 2 a.`id`, 3 a.`fr_num`, 4 b.`ent_status` 5 FROM 6 `table ...

  6. linux中进程和线程简单介绍

    进程和线程的简单知识 进程是用来申请内核资源的,只有资源到位,进程才会进行,进程包含线程,线程是进程内部的调度单位,所以在业内有这样一句话,进程是资源分配最基本单位,线程是系统调度的最基本的单位,进程 ...

  7. 多点DLT (Direct Linear Transformation) 算法

    阅读前可以先参看上一篇代数视觉博客: 四点DLT (Dierct Linear Transformation) 算法 对于大于4个点的数据点来进行 DLT 算法变换, 如果数据点的标注都十分准确,那么 ...

  8. C++中链表报错member access within null pointer of type 'ListNode'

    报错原因:指针有指向空节点的可能,所以报错,C++中链表的使用比较严格 解决方法:在给指针确定指向节点之前,先判断此节点是否为空节点

  9. 《CSOL大灾变》Mobile移植记录——购买区域

    在CSOL大灾变模式中,购买武器只能出现在特定区域,如下:    这里可以通过添加一些不渲染的BOX(如图中的蓝色BOX)作为触发器,然后检测玩家与之触发后才能弹出购买菜单. 在JmonkeyEngi ...

  10. VS2015+QT5.10项目中文乱码

    解决:文件-高级保存选项,选择utf-8编码.