参考网址:

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. 疑难杂症——bash: /dev/null: Permission denied

    描述 在使用 Devstack 的时候需要时常切换用户su stack,此时会触发错误: root@mickeyfan-dev:~# su stack bash: /dev/null: Permiss ...

  2. 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第5节 String类_9_练习:按指定格式拼接字符

    数组再加一个值

  3. 测开之路九十五:css进阶之光标和溢出内容处理

    光标样式:cursor 准备文字 css 溢出内容处理:overflow,默认溢出部分是显示 先把内容放到盒子里面 正常显示 不显示溢出内容 显示为滚动条 自动处理 css /* 光标样式 */p{ ...

  4. WordPress 数据库结构及表字段作用解析

    对于WordPress的开发可以说子凡已经是如痴如醉了,通过 WordPress 本身的开放性接口可以做到很多的事情,但是有些时候我们可能更喜欢直接查询数据库来实现某些 WordPress 没有提供的 ...

  5. 非GUI 模式运行 jmeter 压力测试

    非 GUI 模式,即命令行模式,运行 JMeter 测试脚本能够大大缩减所需要的系统资源. 使用命令:jmeter -n -t <testplan filename> -l <lis ...

  6. SpringBoot jar程序配置成服务运行

    windows 版本 http://www.cppblog.com/aurain/archive/2014/01/23/205534.aspx linux 版本 https://blog.csdn.n ...

  7. 三大浏览器(火狐-谷歌-IE浏览器)驱动版本下载

    1.chrome浏览器: 对于chrome浏览器,有时候会有闪退的情况,有时候也许是版本冲突的问题,我们要对照着这个表来对照查看是不是webdriver和chrome版本不对应 点击下载chrome的 ...

  8. C#判断页面中的多个文本框输入值是否有重复的实现方法

    List<string> list = new List<string>();//首先定义一个泛型数组 //这里假如说有四个文本框 string mainseat = this ...

  9. Linux awk抓取IP的两种方式

    ip addr show ens33 | awk -F "[ /]+" '/inet /{print $3}' 或 ifconfig ens33 | awk -F "[ ...

  10. HTML水平居中和垂直居中的实现方式

    父元素是块元素,根据子元素不同分为以下几种: 1.子元素是行内元素: a.水平居中:在父元素上设置text-align:center; b.垂直居中:在行内子元素上设置行高与父元素相同line-hei ...