js 獲取input type="file" 選擇的文件大小、文件名稱、上次修改時間、類型等信息

時間 2019-11-08

標籤獲取 input type file 選擇文件大小文件名稱上次修改時間類型信息欄目 JavaScript 简体版

原文原文鏈接

文件名的傳遞 ---全路徑獲取javascript

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

文件名的傳遞 ---只獲取文件名html

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數組中）java

 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、MP三、Ra、Ram等等。url爲音頻或視頻文件及其路徑，能夠是相對路徑或絕對路徑.

這樣咱們就能夠根據dynsrc動態賦值任何類型文件得路徑，在javascript中根據Image對象自己得fileSize屬性來獲得文件得大小。固然Image對象還有其它得幾個屬性，例如：fileCreatedDate、fileModifiedDate、fileSize、fileUpdatedDate、filters... oop

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。