input的文件上传类型判断
参考网址:
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的文件上传类型判断的更多相关文章
- JavaScript 文件上传类型判断
文件上传时用到一个功能,使用html元素的input标签实现, <input id="imageFile" name="imageFile1" accep ...
- input限定文件上传类型:Microsoft Office MIME types
<input id = " " name = " " type = " file " accept=" ? ? ? &quo ...
- Codeigniter文件上传类型不匹配错误
Codeigniter的文件上传类方便了我们使用PHP来处理文件上传的操作,使用起来非常简单,如下: $config['upload_path'] = './uploads/'; $config[ ...
- input实现文件上传
input实现文件上传 input + ajax 实现文件上传,包括文件大小及类型的判断 一.html <input type="file" id="file&qu ...
- input file 文件上传标签的样式美化
input file 文件上传标签的样式美化 将<input type="file">的透明度设置为0: <input type="file" ...
- js 实现 input file 文件上传
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...
- jsp页面判断文件上传类型
<script language="javascript" type="text/javascript"> function check_file( ...
- input file实现多选,限制文件上传类型,图片上传前预览功能
限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...
- input file实现多选和限制文件上传类型
<!-- input file accept 属性设置可上传文件的类型 multiple属性设置可多文件上传--> <!-- accept 并未真正的实现限制上传文件类型,只是在 ...
随机推荐
- KVM/QEMU/qemu-kvm/libvirt 概念全解
目录 目录 前言 KVM QEMU KVM 与 QEMU qemu-kvm Libvirt Libvirt 在 OpenStack 中的应用 前言 如果是刚开始接触虚拟机技术的话, 对上述的概念肯定会 ...
- 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_02 递归_5_综合案例_文件搜索
复制上一节课的代码 这三种方式都可以获取到文件的名称 把目录的打印注释掉 如果把文件的后缀改成大写的JAVA 再获取就获取不到了 文件名或者路径 转换为小写的字符串 链式编程
- 《图解设计模式》读书笔记9-2 Proxy模式
目录 Proxy模式 示例程序 程序描述 类图 程序 角色和类图 角色 模式类图 思路拓展 提升速度 代理与委托 Http代理 与其他模式的关联 Decorator模式 Proxy模式 Proxy是代 ...
- python 设置开机启动脚本
1.创建python_auto.bat的快捷方式,放入启动项: C:\Users\Administrator\AppData\Roaming\Microsoft\Windows\Start Menu\ ...
- Net的网络层的构建(源码分析)
概述 网络层的构建是在Net<Dtype>::Init()函数中完成的,构建的流程图如下所示: 从图中可以看出网络层的构建分为三个主要部分:解析网络文件.开始建立网络层.网络层需要参与计算 ...
- PHP上传文件到阿里云OSS,nginx代理访问
1. 阿里云OSS创建存储空间Bucket(读写权限为:公共读) 2. 拿到相关配置 accessKeyId:********* accessKeySecret:********* endpoint: ...
- 阅读jdk源码的流程(从今天开始要阅读jdk源码)
1.java.lang 2.java.util 3.java.util.concurrent 4.java.util.concurrent.atomic 5.java.lang.reflect 6.j ...
- linux系统中的基础监控(硬盘,内存,系统负载,CPU,网络等)
Linux系统常见日常监控 系统信息 查看 CentOS 版本号:cat /etc/redhat-release 综合监控 nmon 系统负载 命令:w(判断整体瓶颈) 12:04:52 up 1 ...
- 从建立yum仓库到搭建ftp以及http服务
1 什么是yum仓库 yum工作需要依赖C/S架构工作模式的文件服务器,服务器中存放了yum工作时所需的程序包.yum接收到需要安装的程序包的名称之后,通过文件共享协议(或者文件传输协议),在配置文件 ...
- asp.net 关于SessionId
原文:https://www.cnblogs.com/zhang1999/p/7278020.html 登陆页面使用Session存储验证码,导致会话产生SessionId,从而导致会话固定,登陆后用 ...