js 获取input type="file" 选择的文件大小、文件名称、上次修改时间、类型等信息


转自 https://www.cnblogs.com/ghfjj/p/6306386.html

文件名的传递 ---全路径获取

$('#file').change(function(){ $('#em').text($('#file').val()); });

文件名的传递 ---只获取文件名

复制代码
var file = $('#file'), aim = $('#em'); file.on('change', function( e ){ //e.currentTarget.files 是一个数组,如果支持多个文件,则需要遍历 var name = e.currentTarget.files[0].name; aim.text( name ); });
复制代码

获取input type="file" 选择的文件大小、文件名称、上次修改时间、类型等信息(*多个文件会存储在files数组中)

复制代码
 1 <html xmlns="http://www.w3.org/1999/xhtml">  
 2 <head runat="server">  3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  4 <title></title>  5 </head>  6 <body>  7 <form id="form1" runat="server">  8 <div>  9 <input type="file" name="f" id="f" /> 10 <input type="button" name="aa" id="aa" value="测试" onclick="javascript: _s();" /> 11 </div> 12 </form> 13 </body> 14 </html> 15 <script type="text/javascript"> 16 function _s() { 17 var f = document.getElementById("f").files; 18 //上次修改时间 19 alert(f[0].lastModifiedDate); 20 //名称 21 alert(f[0].name); 22 //大小 字节 23 alert(f[0].size); 24 //类型 25 alert(f[0].type); 26  } 27 </script> 28 29 30 判断文件类型 31 var type=(src.substr(src.lastIndexOf("."))).toLowerCase(); 32 if(type!=".jpg"&&type!=".gif"&&type!=".jpeg"&& type!=".png"){ 33 alert("您上传图片的类型不符合(.jpg|.jpeg|.gif|.png)!"); 34 return false; 35 }
复制代码

 

利用image属性来获取input file里文件的大小:

复制代码
<script type="text/javascript"> 
function getFilePath(filePath) { var image=new Image(); image.dynsrc=filePath; alert(image.filePath); } </</SPAN>script> <body> <INPUT TYPE="file" NAME="file" SIZE="30" onchange="getFileSize(this)"> </</SPAN>body> <script type="text/javascript"> function getFileSize(fileObj) { var image=new Image(); image.dynsrc=fileObj.value; alert(image.fileSize || fileObj.files[0].fileSize); } <script> <body> <INPUT TYPE="file" NAME="file" SIZE="30" onchange="getFileSize(this.value)"> <body>
复制代码

 

*ps:下面主要谈谈另一种方式,在html标签中有一个不为一般开发人员“深”知得img标签,先来说下它有得属性:src,dynsrc,start,alt,controls,loop,loopdelay,hspace,vspace....还有一些常用得属性就不列出来了,在这里我们说一下"dynsrc"这个属性:dynsrc可以用来插入各种多媒体,格式可以是Wav、Avi、AIFF、AU、MP3、Ra、Ram等等。url为音频或视频文件及其路径,可以是相对路径或绝对路径.

这样我们就可以根据dynsrc动态赋值任何类型文件得路径,在javascript中根据Image对象本身得fileSize属性来得到文件得大小。当然Image对象还有其它得几个属性,例如:fileCreatedDate、fileModifiedDate、fileSize、fileUpdatedDate、filters...


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM