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 并未真正的实现限制上传文件类型,只是在 ...
随机推荐
- 009-elasticsearch5.4.3【三】搜索概述-查询模型、分页、ES数据类型
一.概述 1.查询模型 搜索API允许用户执行搜索查询并返回与查询匹配的搜索匹配.它可以跨一个或多个索引以及跨一种或多种类型执行.可以使用查询Java API提供查询.搜索请求的主体是使用Search ...
- springmvc+ehcache简单例子
这里采用的是spring3.2.ehcache2.7.tomcat7.0(必须) 1.web.xml <?xml version="1.0" encoding="U ...
- Android Framework中Thread类
Thread类是Android为线程操作而做的一个封装.代码在Thread.cpp中,其中还封装了一些与线程同步相关的类. Thread类 Thread类的构造函数中的有一个canCallJava T ...
- 如何解决IIS配置HTTPS证书后刷新消失问题
IIS配置CER证书后完成证书申请后刷新后就会消失的这个BUG微软一直存在,因为我们一般申请都是下来的CER文件和私钥 但是IIS只支持PFX文件的导入,所以我们需要把CER文件和证书私钥转换成PFX ...
- BootStrap前端框架
BootStrap前端框架 Bootstrap 教程:http://www.runoob.com/bootstrap/bootstrap-tutorial.html BpptStrap操作手册:htt ...
- 取消a或input标签聚焦后出现虚线框
1:在a标签里加入js控制,当a标签被聚焦时,强制取消焦点,这时候a标签自然不会有虚线框. <a href="#" onfocus="this.blur();&qu ...
- node.js—创建、删除、追加文件等方法汇总
使用Node.js的fs模块必须在electron项目里 /* 1. fs.stat 检测是文件还是目录(目录 文件是否存在) 2. fs.mkdir 创建目录 (创建之前先判断是否存在) 3. fs ...
- 尝试Vue3.0
Composition API 纯函数式 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- java静态代码块,构造方法,初始化块的执行顺序
代码Parent和Sub进行讲解 public class Parent { private static final String name; public Parent() { System.ou ...
- 问题 D: 小k的硬币问题
问题 D: 小k的硬币问题 时间限制: 1 Sec 内存限制: 128 MB提交: 21 解决: 5[提交] [状态] [命题人:jsu_admin] 题目描述 小k和小p一起玩一个游戏,有n堆硬 ...