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 并未真正的实现限制上传文件类型,只是在 ...
随机推荐
- 【GIS数据处理】 利用空间关系建立线CAD数据和属性表关联
这两天遇到一个不太容易解决的问题. 某燃气公司想自己对自建管线进行测绘便于数字化管理,在接受了简单的RTK测量培训和Cass成图培训后,就自己着手开干. 最近数据整理的差不多了,就提交给我请我帮忙核查 ...
- thinkphp5.0学习笔记(二)API后台处理与命名空间
命名空间 先来看命名空间吧: 命名空间是学习TP的基础, <?php namespace app\lian\c1; class yi{ public $obj = "这是第一个空间里面 ...
- 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_04 IO字节流_10_字节输入流一次读取一个字节的原理
原理解析 创建一个字节流,指向读取文件的第一个字节. read找jvm,jvm找os.os去读取硬盘.,读取后指正向后移动一位
- vue组件生命周期
分为4个阶段:create/mount/update/destroy 每一个阶段都对应着有自己的处理函数 create: beforeCreate created 初始化 mount: beforeM ...
- 阅读笔记12-Java 面试题 —— 老田的蚂蚁金服面试经历
电话一面 1.自我介绍.自己做的项目和技术领域 2.项目中的监控:那个监控指标常见的哪些? 3.微服务涉及到的技术以及需要注意的问题有哪些? 4.注册中心你了解了哪些? 5.consul 的可靠性你了 ...
- git.ZC_命令积累
1.删除文件 git rm 想要删除的文件的名字及其后缀 git commit -m "对本次提交的描述信息" git push 删除文件夹,执行命令: git rm 想要删除的文 ...
- NornJ-javascript模版引擎
NornJ-javascript模版引擎 NornJ是一个渲染效率高,语法可读性好,可扩展性超强,适用场景丰富的javascript模板引擎. 学习网址:https://www.npmjs.com/p ...
- C#里sqlDataAdapter.fill(DataSet,String)的用法
第二个参数 String是指定DataSet 里表的名字,例如 sqlDataAdapter.fill(DataSet,"学生表") 指定后,以后就可以这样调用这张表 DataSe ...
- css:设置div边框透明+渐变
写作背景: 觅兼职--登陆页面,UI给的原型图很漂亮,其中有一个图要求div外面有一圈透明度为0.37且带有渐变的边框.效果图如下: 在写的时候遇到了一点小小的问题:无法给同一个div设置圆角的透明+ ...
- ES6 new Set实现数组去重
使用new Set实现数组去重必须结合for of, 如果使用for循环就实现不了 var arr = new Set([1, 2, 1, 1, 2, 3, 3, 4, 4]); for (var e ...