JavaScript文件上傳大小驗證

247

是，W3C有一項新功能，它受到一些現代瀏覽器File API的支持。它可以用於此目的，並且很容易測試它是否受支持，如果不是，則會退回到其他機制（如果需要）。

這裏有一個完整的例子：

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"> 
<title>Show File Data</title> 
<style type='text/css'> 
body { 
    font-family: sans-serif; 
} 
</style> 
<script type='text/javascript'> 
function showFileSize() { 
    var input, file; 

    // (Can't use `typeof FileReader === "function"` because apparently 
    // it comes back as "object" on some browsers. So just see if it's there 
    // at all.) 
    if (!window.FileReader) { 
     bodyAppend("p", "The file API isn't supported on this browser yet."); 
     return; 
    } 

    input = document.getElementById('fileinput'); 
    if (!input) { 
     bodyAppend("p", "Um, couldn't find the fileinput element."); 
    } 
    else if (!input.files) { 
     bodyAppend("p", "This browser doesn't seem to support the `files` property of file inputs."); 
    } 
    else if (!input.files[0]) { 
     bodyAppend("p", "Please select a file before clicking 'Load'"); 
    } 
    else { 
     file = input.files[0]; 
     bodyAppend("p", "File " + file.name + " is " + file.size + " bytes in size"); 
    } 
} 

function bodyAppend(tagName, innerHTML) { 
    var elm; 

    elm = document.createElement(tagName); 
    elm.innerHTML = innerHTML; 
    document.body.appendChild(elm); 
} 
</script> 
</head> 
<body> 
<form action='#' onsubmit="return false;"> 
<input type='file' id='fileinput'> 
<input type='button' id='btnLoad' value='Load' onclick='showFileSize();'> 
</form> 
</body> 
</html>

而且here它是在行動。嘗試使用最新版本的Chrome或Firefox。

稍微偏離主題，但：請注意，客戶端驗證服務器端驗證無可替代。客戶端驗證純粹是爲了提供更好的用戶體驗。例如，如果您不允許上傳超過5MB的文件，則可以使用客戶端驗證來檢查用戶選擇的文件大小不超過5MB，並且如果它是（所以他們不會花費所有時間上傳，只是爲了得到在服務器上扔掉的結果），但是您必須也強制在服務器上的限制，因爲所有客戶端限制（和其他驗證）可以繞過。

來源

2010-09-15 13:05:56

+0

+1對於「所有客戶端的限制（和其他驗證）可以規避」。這對於「本地」/「編譯」數據庫前端應用程序也是如此。並且不要將數據庫訪問密碼放入編譯後的代碼中，甚至不要「加密」（密碼也在代碼中，最近纔看到）。 – masterxilo 2018-01-12 12:13:32

11

否是的，在較新的瀏覽器中使用File API。詳情請參閱TJ的回答。

如果您還需要支持較舊的瀏覽器，則必須使用基於Flash的上傳程序（如SWFUpload或Uploadify）來執行此操作。

SWFUpload Features Demo顯示file_size_limit設置如何工作。

請注意，這（顯然）需要Flash，加上其工作方式與普通上傳表單有點不同。

來源

2010-09-15 13:03:42

0

你可以試試這個fineuploader

它IE6（和avove），Chrome或Firefox

來源

2012-09-20 08:47:44 anson

+3

Fine Uploader無法在IE9及更舊版本中驗證文件大小，因爲不支持File API。 IE10是第一個支持File API的Internet Explorer版本。 – 2012-11-17 18:09:55

87

下工作正常使用jQuery：

<form action="upload" enctype="multipart/form-data" method="post"> 

    Upload image: 
    <input id="image-file" type="file" name="file" /> 
    <input type="submit" value="Upload" /> 

    <script type="text/javascript"> 
     $('#image-file').bind('change', function() { 
      alert('This file size is: ' + this.files[0].size/1024/1024 + "MB"); 
     }); 
    </script> 

</form>

來源

2012-11-06 11:21:04 Ben

+1

@ipd，IE8後備的任何機會？（我恨自己甚至提到IE） – Asher 2015-04-16 11:51:43

+0

@ben見上文。 – ipd 2015-04-20 20:05:32

+0

這一個工作格柵，但它也適用於多個文件？ – 2017-08-15 08:01:57

6

如果你使用jQuery驗證，你可以寫這樣的事情：

$.validator.addMethod(
    "maxfilesize", 
    function (value, element) { 
     if (this.optional(element) || ! element.files || ! element.files[0]) { 
      return true; 
     } else { 
      return element.files[0].size <= 1024 * 1024 * 2; 
     } 
    }, 
    'The file size can not exceed 2MB.' 
);

來源

2013-04-29 09:10:46

2

我使用一個主要的Javascript函數我在Mozilla開發人員網絡站點https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications找到，以及與AJAX的另一個功能，並根據我的需要進行更改。它接收一個關於我的html代碼中我想寫文件大小的位置的文檔元素id。

<Javascript> 

function updateSize(elementId) { 
    var nBytes = 0, 
    oFiles = document.getElementById(elementId).files, 
    nFiles = oFiles.length; 

    for (var nFileId = 0; nFileId < nFiles; nFileId++) { 
     nBytes += oFiles[nFileId].size; 
    } 
    var sOutput = nBytes + " bytes"; 
    // optional code for multiples approximation 
    for (var aMultiples = ["K", "M", "G", "T", "P", "E", "Z", "Y"], nMultiple = 0, nApprox = nBytes/1024; nApprox > 1; nApprox /= 1024, nMultiple++) { 
     sOutput = " (" + nApprox.toFixed(3) + aMultiples[nMultiple] + ")"; 
    } 

    return sOutput; 
} 
</Javascript> 

<HTML> 
<input type="file" id="inputFileUpload" onchange="uploadFuncWithAJAX(this.value);" size="25"> 
</HTML> 

<Javascript with XMLHttpRequest> 
document.getElementById('spanFileSizeText').innerHTML=updateSize("inputFileUpload"); 
</XMLHttpRequest>

乾杯

來源

2013-07-26 18:22:28

-2

如果IE的「文件模式」設置爲「標準」您可以使用簡單的JavaScript「大小」的方法來獲得上傳文件的大小。

設置IE的 '文件模式' 到 '標準'：

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

比，使用 '尺寸' JavaScript方法來獲取上傳的文件大小：

<script type="text/javascript"> 
    var uploadedFile = document.getElementById('imageUpload'); 
    var fileSize = uploadedFile.files[0].size; 
    alert(fileSize); 
</script>

這對我的作品。

來源

2013-07-31 13:54:41 Lilla

+1

無論您添加哪個元標記，這都不適用於IE9或更高版本。 – 2013-07-31 14:27:02

4

這很簡單。

  var oFile = document.getElementById("fileUpload").files[0]; // <input type="file" id="fileUpload" accept=".jpg,.png,.gif,.jpeg"/> 

      if (oFile.size > 2097152) // 2 mb for bytes. 
      { 
       alert("File size must under 2mb!"); 
       return; 
      }

來源

2016-04-22 14:37:57

2

即使問題得到解答，我想發佈我的答案。可能對未來的觀衆來說很方便。您可以像下面的代碼一樣使用它。

<input type="file" id="fileinput" /> 
<script type="text/javascript"> 
    function readSingleFile(evt) { 
    //Retrieve the first (and only!) File from the FileList object 
    var f = evt.target.files[0]; 
    if (f) { 
     var r = new FileReader(); 
     r.onload = function(e) { 
      var contents = e.target.result; 
     alert("Got the file.n" 
       +"name: " + f.name + "n" 
       +"type: " + f.type + "n" 
       +"size: " + f.size + " bytesn" 
       + "starts with: " + contents.substr(1, contents.indexOf("n")) 
     ); 
     if(f.size > 5242880) { 
       alert('File size Greater then 5MB!'); 
       } 


     } 
     r.readAsText(f); 
    } else { 
     alert("Failed to load file"); 
    } 
    }

來源

2016-06-01 06:47:56

9

Works的動態和靜態文件元素（文件大小的方法是非標準功能，並且自壁虎7.0棄用。）

的Javascript唯一的解決辦法

function ValidateSize(file) { 
 
     var FileSize = file.files[0].size/1024/1024; // in MB 
 
     if (FileSize > 2) { 
 
      alert('File size exceeds 2 MB'); 
 
      // $(file).val(''); //for clearing with Jquery 
 
     } else { 
 

 
     } 
 
    }

<input onchange="ValidateSize(this)" type="file">

來源

2017-06-12 17:24:16

+1

FileSize方法是一種非標準功能，自Gecko 7.0以後不推薦使用。 https://developer.mozilla.org/en-US/docs/Web/API/File/fileSize – MissRaphie 2017-07-10 17:11:41

+1

尼斯答案。我有同樣的問題，但你的解決方案爲我工作:) – 2017-07-13 10:27:33

0

JQuery ex在這個線程提供了充足是非常過時的，而谷歌是沒有幫助的所有所以這裏是我的版本：

<script type="text/javascript"> 
     $('#image-file').on('change', function() { 
      console.log($(this)[0].files[0].name+' file size is: ' + $(this)[0].files[0].size/1024/1024 + 'Mb'); 
     }); 
    </script>

來源

2017-08-10 17:48:38 nodws

JavaScript文件上傳大小驗證

回答

相關問題