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 并未真正的实现限制上传文件类型,只是在 ...
随机推荐
- 001/Node.js(Mooc)--基础知识
一.Node.js基础知识 node.js用C++语言编写. 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时 ...
- Flash存储模块调试
Flash存储模块 Flash存储模块之前SPI一直读deviceID有问题原因如下: 用正点原子的例程是可以的,但是转移到自己的工程项目里就不行!!原因是正点原子没有在SPI初始化里 RCC ...
- 《剑指offer》面试题20 顺时针打印矩阵 Java版
我的方法:遇到这种题最好在纸上画一画打印路线.我利用了4个标志left.top.right.bottom,表示当前需要打印的左界.上届.右界和下界,换句话说这些界线之外的已经打印了,如此一来判断结束的 ...
- enWin使用部分中文字库
在小型嵌入式设备中有时需要简单的人机2交互界面,小型GUI有很多,比较常用的有STenWin,UCGUI,enwin,Embedded Wizard GUI.对与STenWin和enWin区别主要在S ...
- 在学习linux磁盘管理期间学习的逻辑卷管理笔记
LVM(逻辑分区)的创建顺序:物理分区-物理卷-卷组-逻辑卷-挂载. 物理卷(Physical Volume,PV):就是指硬盘分区,也可以是整个硬盘或已创建的软RAID,是LVM的基本存储设备. 卷 ...
- window.onload后跟函数 和跟函数名的区别【window.onload = asd() 和 window.onload = asd 】
window.onload:页面加载完毕执行[DOM tree + 外部图片 + 资源] <script> function asd(){ return 10; } window.onlo ...
- MVC一个action对应多个视图的写法
一,如下代码 using System; using System.Collections.Generic; using System.Linq; using System.Web; using Sy ...
- C#设计模式:命令模式(Command Pattern)
一,什么是命令模式(Command Pattern)? 命令模式:将请求封装成命令对象,请求的具体执行由命令接收者执行: 二,如下代码 using System; using System.Colle ...
- C# 委托 线程 窗体假死
转载:http://www.cnblogs.com/smartls/archive/2011/04/08/2008981.html 异步调用是CLR为开发者提供的一种重要的编程手段,它也是构建高性能. ...
- 数据分析之pandas(1)
一.Pandas的数据结构 1.Series (1)类似于一维数组 (2)通过list构建Series ser_obj=pd.Series(range(10)) (3)pandas数据结构案例