参考网址:

http://www.helloweba.com/view-blog-224.html

<p>
<label>请选择一个图像文件:</label>
<input type="file" id="file_input" />
</p>
<div id="result"></div>

  

var result = document.getElementById("result");
var input = document.getElementById("file_input"); if(typeof FileReader==='undefined'){
result.innerHTML = "抱歉,你的浏览器不支持 FileReader";
input.setAttribute('disabled','disabled');
}else{
input.addEventListener('change',readFile,false);
} function readFile(){
var file = this.files[0];
if(!/image\/\w+/.test(file.type)){
alert("文件必须为图片!");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
result.innerHTML = '<img src="'+this.result+'" alt=""/>'
}
}

获取文件的类型,名称,上传时间,移到本地的时间:

// var oDate=file.lastModifiedDate; //获取移到本地的时间

var oDate=new Date();
var sDate=oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate(); //获取年,月,日,上传时间 var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
result.innerHTML = file.type; //获取文件的类型
fileName.innerHTML = file.name; //获取文件的名称
fileTime.innerHTML = sDate; //获取上传时间
}
result.innerHTML = '<img src="'+this.result+'" alt=""/>'   //为获取图片原图

input的文件上传类型判断的更多相关文章

  1. JavaScript 文件上传类型判断

    文件上传时用到一个功能,使用html元素的input标签实现, <input id="imageFile" name="imageFile1" accep ...

  2. input限定文件上传类型:Microsoft Office MIME types

    <input id = " " name = " " type = " file " accept=" ? ? ? &quo ...

  3. Codeigniter文件上传类型不匹配错误

    Codeigniter的文件上传类方便了我们使用PHP来处理文件上传的操作,使用起来非常简单,如下:   $config['upload_path'] = './uploads/'; $config[ ...

  4. input实现文件上传

    input实现文件上传 input + ajax 实现文件上传,包括文件大小及类型的判断 一.html <input type="file" id="file&qu ...

  5. input file 文件上传标签的样式美化

    input file 文件上传标签的样式美化 将<input type="file">的透明度设置为0: <input type="file" ...

  6. js 实现 input file 文件上传

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...

  7. jsp页面判断文件上传类型

    <script language="javascript" type="text/javascript"> function check_file( ...

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

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

  9. input file实现多选和限制文件上传类型

    <!-- input file  accept 属性设置可上传文件的类型  multiple属性设置可多文件上传--> <!-- accept 并未真正的实现限制上传文件类型,只是在 ...

随机推荐

  1. 类Vector

    /* * Vector的特有功能 * * Vector出现较早,比集合更早出现 * * 1:添加功能 * public void addElement(Object obj);//用add()替代 * ...

  2. Mac 设置git命令tab自动补全(亲测有效)

    转载 :https://blog.csdn.net/tiancaijyy/article/details/84888868 注意: 获取git-completion.bash  要对应自己的git版本 ...

  3. day16模块,导入模板完成的三件事,起别名,模块的分类,模块的加载顺序,环境变量,from...import语法导入,from...import *,链式导入,循环导入

    复习 ''' 1.生成器中的send方法 -- 给当前停止的yield发生信息 -- 内部调用__next__()取到下一个yield的返回值 2.递归:函数的(直接,间接)自调用 -- 回溯 与 递 ...

  4. [Usaco2014 Feb] Roadblock

    有一个无向图,共N个节点,编号1至N,共M条边.FJ在节点1,它想到达节点N.FJ总是会选择最短路径到达节点N .作为捣蛋的奶牛Bessie,它想尽量延迟FJ到达节点N的时间,于是Bessie决定从M ...

  5. CentOSLinux系统中Redis数据库的安装及配置

    MongoDB 传统方式安装 关闭 SELinux 编辑配置文件:vim /etc/selinux/config 把 SELINUX=enforcing 改为 SELINUX=disabled Mon ...

  6. [BZOJ5099]Pionek

    Description 给 \(n\) (\(n\le 2\times 10 ^5\)) 个向量,现在你在 \((0,0)\) ,选择一些向量使你走的最远. Solution 自己的想法:按极角排序后 ...

  7. RandomAccessFile类使用说明

    RandomAccessFile类是Java Io体系中功能最为丰富的文件访问类,它提供了众多的文件访问方法.RandomAccessFile类支持“随机访问”方式,这里的“随机”是指程序可以直接跳到 ...

  8. python学习第四十五天__name__用法和作用

    在python导入模块导入另外一个模块的时候,有时候只是想用其一个方法,会出现其他的方法也运行了,python用到__name__==‘__main__’ 解决问题,那么__name__用法和作用 1 ...

  9. Log4Net 之走进Log4Net (四)

    原文:Log4Net 之走进Log4Net (四) 一.Log4net的结构 log4net 有四种主要的组件,分别是Logger(记录器), Repository(库), Appender(附着器) ...

  10. .NET基础篇——利用泛型与反射更新实体(ADO.NET Entity Framework)(转)

    自从ADO.NET Entity Framework面世以来,受到大家的热捧,它封装了大量代码生成的工具,用户只需要建立好实体之间的关系,系统就是会为用户自动成功了Add.Delete.CreateO ...