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+‘" />‘
    }
} 

获取文件的类型,名称,上传时间,移到本地的时间:

// 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+‘" />‘   //为获取图片原图
时间: 2024-12-20 15:42:03

input的文件上传类型判断的相关文章

input限定文件上传类型:Microsoft Office MIME types

<input id = " " name = " " type = " file " accept=" ? ? ? ">Extension MIME Type .doc application/msword .dot application/msword .docx application/vnd.openxmlformats-officedocument.wordprocessingml.document .do

JavaScript如何判断文件上传类型 实例分享

分享下JavaScript判断文件上传类型的方法,可针对重复的内容触发onchange事件. JavaScript判断文件上传类型的方法:文件上传时用到一个功能,使用html元素的input标签实现: <input id="imageFile" name="imageFile1" accept="image/jpg,image/jpeg,image/png,image/bmp,image/gif" type="file"

SpringMVC全局文件上传类型限制【终极解决方案】

各位小伙伴们,有没有遇到这种情况,在信息安全日益受到各方重视的当下,白帽子越来越多,相应的作为开发人员的安全意识也得与日俱增.但是呢,总会有各种各种的原因,会出现全局性系统性的问题,你无法解决,或者无从下手.怎么办?没办法,只有回归本质. 今天分享一个SpringMVC全局文件上传类型限制终极解决方案,为那些还在迷茫该如何处理全局性文件上传漏洞的小伙伴送来一份小礼物.在阅读我的代码之前,请看下面的一篇关于SpringMVC文件上传的博文摘要.博文地址http://exceptioneye.ite

struts2之限制文件上传类型

FileUploadInterceptor中定义了setAllowedExtensions(String)和setAllowedTypes(String)两种方法来限制文件上传类型 1.setAllowedExtensions(String)设置允许上传的文件后缀名, setAllowedTypes(String)设置了允许上传文件的类型,推荐使用setAllowedTypes(String). 因为如果使用setAllowedExtensions(String)用户将文件后缀修改成允许上传的后

js 实现 input file 文件上传

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery/jquery-1

文件上传,判断文件错误类型

HTML代码上传文件: <form action="doAction.php" method="post" enctype="multipart/form-data"> 请选择上传文件:<input type="file" name="myFile" /><br /> <input type="submit" value="上传&quo

input file实现多选,限制文件上传类型,图片上传前预览功能

限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② multiple 属性规定输入字段可选择多个值. 示例: <!-- image/* 所有图片 image/png png图片 image/jpg jpg图片 image/gif gir动图 application/msword Word文档(.doc) application/vnd.openxmlform

input file实现多选和限制文件上传类型

<!-- input file  accept 属性设置可上传文件的类型  multiple属性设置可多文件上传--> <!-- accept 并未真正的实现限制上传文件类型,只是在选文件的时候有限制, 如果选文件的时候手动修改上传文件的类型,还是可以上传其他文件的. 因此,要实现只上传accept属性指定的文件类型,还必修结合js来实现--> <input type="file" accept=".doc,.docx" multipl

input file 文件上传,js控制上传文件的大小和格式

文件上传一般是用jquery的uploadify,比较好用.后面会出文章介绍uploadify这个插件. 但是,有时候为了偷懒,直接就用input 的file进行文件和图片等的上传,input file 可以控制上传的格式,但是是html5,很多浏览器不支持,请看我的文章对input file上传类型的控制. 下面我用javascript来控制文件上传的大小和类型. 贴出html代码: <form action="后端接口" enctype="multipart/for