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 并未真正的实现限制上传文件类型,只是在 ...
随机推荐
- 疑难杂症——bash: /dev/null: Permission denied
描述 在使用 Devstack 的时候需要时常切换用户su stack,此时会触发错误: root@mickeyfan-dev:~# su stack bash: /dev/null: Permiss ...
- 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第5节 String类_9_练习:按指定格式拼接字符
数组再加一个值
- 测开之路九十五:css进阶之光标和溢出内容处理
光标样式:cursor 准备文字 css 溢出内容处理:overflow,默认溢出部分是显示 先把内容放到盒子里面 正常显示 不显示溢出内容 显示为滚动条 自动处理 css /* 光标样式 */p{ ...
- WordPress 数据库结构及表字段作用解析
对于WordPress的开发可以说子凡已经是如痴如醉了,通过 WordPress 本身的开放性接口可以做到很多的事情,但是有些时候我们可能更喜欢直接查询数据库来实现某些 WordPress 没有提供的 ...
- 非GUI 模式运行 jmeter 压力测试
非 GUI 模式,即命令行模式,运行 JMeter 测试脚本能够大大缩减所需要的系统资源. 使用命令:jmeter -n -t <testplan filename> -l <lis ...
- SpringBoot jar程序配置成服务运行
windows 版本 http://www.cppblog.com/aurain/archive/2014/01/23/205534.aspx linux 版本 https://blog.csdn.n ...
- 三大浏览器(火狐-谷歌-IE浏览器)驱动版本下载
1.chrome浏览器: 对于chrome浏览器,有时候会有闪退的情况,有时候也许是版本冲突的问题,我们要对照着这个表来对照查看是不是webdriver和chrome版本不对应 点击下载chrome的 ...
- C#判断页面中的多个文本框输入值是否有重复的实现方法
List<string> list = new List<string>();//首先定义一个泛型数组 //这里假如说有四个文本框 string mainseat = this ...
- Linux awk抓取IP的两种方式
ip addr show ens33 | awk -F "[ /]+" '/inet /{print $3}' 或 ifconfig ens33 | awk -F "[ ...
- HTML水平居中和垂直居中的实现方式
父元素是块元素,根据子元素不同分为以下几种: 1.子元素是行内元素: a.水平居中:在父元素上设置text-align:center; b.垂直居中:在行内子元素上设置行高与父元素相同line-hei ...