参考网址:

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. Altium Designer chapter7总结

    PCB设计高级进阶中需要注意如下: (1)PCB层集合管理:对于后期的处理可以看到不同层的相关信息. (2)内电层的分割:对于多层板的设计,特别是电源层中有不同类型的电源时需要考虑电源的分割. (3) ...

  2. python 正则表达式 re.search

    #coding:utf-8 import re #将正则表达式编译为pattern对象 #compile(pattern, flags=0) #Compile a regular expression ...

  3. python基础-5 冒泡排序、递归

    上节总结 一.上节内容补充回顾 1.lambda func = lambda x,y: 9+x 参数: x,y 函数体:9+x ==> return 9+x func: 函数名 def func ...

  4. Java-集合第五篇Map集合

    1.什么是Map集合. Map用于保存具有映射关系的数据.key和value都可以是任意引用类型,但key不允许重复,即同一个Map的任何两个key通过equals方法比较总是返回false. 从Ja ...

  5. MySQL-第十四篇事务管理

    1.什么是事务 事务是由一步或者几步数据库操作序列组成的逻辑执行单元,这系列操作要么全部执行,要么全部放弃执行. 2.事务具备的4个特性: 1>原子性(Atomicity):事务是应用中最小的执 ...

  6. poj-2516.minimum cost(k次费用流)

    Minimum Cost Time Limit: 4000MS   Memory Limit: 65536K Total Submissions: 19883   Accepted: 7055 Des ...

  7. Java中的容器(集合)之ArrayList源码解析

    1.ArrayList源码解析 源码解析: 如下源码来自JDK8(如需查看ArrayList扩容源码解析请跳转至<Java中的容器(集合)>第十条):. package java.util ...

  8. 循环结构 :while

    循环结构 :while 循环四要素: 1.初始化条件 2.循环条件 3.循环体 4.迭代条件 格式: 1.初始化条件 while(2.循环条件){ 3.循环体 4.迭代条件 } public clas ...

  9. [2019杭电多校第六场][hdu6635]Nonsense Time

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6635 题意是说一开始所有数都冻结,第i秒会解冻第ki个数,求每秒状态下的最长上上升子序列长度. 这种题 ...

  10. python抓取往期双色球

    import requests import json,csv ''' http://m.zhcw.com/clienth5.do?lottery=FC_SSQ&pageSize=20& ...