参考网址:

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. 非web工程,打jar放shell执行

    作为6年经验的程序员,一直在搞web服务应用开发,今天领导被吐槽了,只会web方面的东东,最基本的打包啥啥都不会.. 一般开发工程都是web项目,突然要求开发非web,不用tomcat装(浪费端口号) ...

  2. spring切换环境变量——@Profile注解的使用

    在容器中如果存在同一类型的多个组件,也可以使用@Profile注解标识要获取的是哪一个bean,这在不同的环境使用不同的变量的情景特别有用.例如,开发环境.测试环境.生产环境使用不同的数据源,在不改变 ...

  3. (转)Intellij IDEA 自动生成 serialVersionUID

    转自 : https://blog.csdn.net/tiantiandjava/article/details/8781776 Setting->Inspections->Seriali ...

  4. python修改文件

    文档username.txt 将文件中密码123456改成67890: 方法一:(简单粗暴) 1.打开文件 2.读出数据 3.修改数据 4.清空原来文件,将新的内容写进去 f = open('user ...

  5. 16/7/7_PHP-Static静态关键字

    Static静态关键字 静态属性与方法可以在不实例化类的情况下调用,直接使用类名::方法名的方式进行调用.静态属性不允许对象使用->操作符调用. class Car { private stat ...

  6. java 集合基础(适用单线程)

    1.集合树状: Collection ├List │├LinkedList │├ArrayList │└Vector │ └Stack └Set │├HashSet │├TreeSet │├Linke ...

  7. C语言作业总结

    .## 一.我学到的内容 二.我的收获 作业 学到的知识点简介 C语言I博客作业01 学习了markdown语法. C语言I博客作业02 学习了<提问的智慧>. C语言I博客作业03 了解 ...

  8. HardFault_Handler

    STM32程序一运行就进入HardFault_Handler,原因很可能是堆栈溢出 ]={}; // 我把程序中上面这句注释了就没事了 :进入HardFault_Handler也可能是数组越界引起的: ...

  9. <每日一题> Day8:CodeForces-996A.Hit the Lottery(贪心)

    原题链接 因为数据太水,我直接一发暴力过了...... #include <cstdio> using namespace std; ] = {, , , , }; int main() ...

  10. CSRF verification failed. Request aborted.错误解决办法

    在Django项目的页面,提交form表单POST请求时,会出现报错:CSRF verification failed. Request aborted. 需要在form表单中加:{% csrf_to ...