Xác thực kích thước tải lên tệp JavaScript


Câu trả lời:


327

, có một tính năng mới từ W3C được hỗ trợ bởi một số trình duyệt hiện đại, API tệp . Nó có thể được sử dụng cho mục đích này và thật dễ dàng để kiểm tra xem nó có được hỗ trợ hay không (nếu cần) cho cơ chế khác nếu không.

Đây là một ví dụ hoàn chỉnh:

<!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>

đây là hành động. Hãy thử điều đó với phiên bản Chrome hoặc Firefox gần đây.


Hơi lạc đề, nhưng: Lưu ý rằng xác thực phía máy khách không thể thay thế cho xác thực phía máy chủ. Xác thực phía khách hàng hoàn toàn là để cung cấp trải nghiệm người dùng đẹp hơn. Ví dụ: nếu bạn không cho phép tải lên tệp lớn hơn 5 MB, bạn có thể sử dụng xác thực phía máy khách để kiểm tra xem tệp mà người dùng đã chọn có kích thước không quá 5 MB và cung cấp cho họ một thông điệp thân thiện tốt đẹp nếu đó là (vì vậy họ không dành toàn bộ thời gian tải lên chỉ để lấy kết quả ở máy chủ), nhưng bạn cũng phải thực thi giới hạn đó tại máy chủ, vì tất cả các giới hạn phía máy khách (và các xác nhận khác) có thể bị phá vỡ.


12
+1 cho "tất cả các giới hạn phía khách hàng (và các xác nhận khác) có thể bị phá vỡ". Điều này đúng với các ứng dụng lối vào cơ sở dữ liệu "gốc" / "đã biên dịch". Và đừng đặt mật khẩu truy cập cơ sở dữ liệu vào mã được biên dịch của bạn, thậm chí không được "mã hóa" (với mật khẩu cũng nằm trong mã - chỉ cần nhìn thấy điều này gần đây).
masterxilo

117

Sử dụng 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>

2
@ipd, bất kỳ cơ hội của một dự phòng IE8? (Tôi ghét bản thân mình vì đã đề cập đến IE)
Asher

2
Cái này hoạt động tốt nhưng nó cũng hoạt động cho nhiều tập tin?
Ingus

4
Nó sẽ là MiBnếu bạn tính toán đến cơ sở của 1024.
slartidan

69

Hoạt động cho phần tử tệp động và tĩnh

Giải pháp chỉ 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">


1
Câu trả lời tốt đẹp. Tôi đã có cùng một vấn đề nhưng giải pháp của bạn đã có hiệu quả với tôi :)
Dipankar Das

1
NB OP đã chỉnh sửa bài đăng để mã bây giờ chính xác, sử dụng thuộc sizetính
UsAndRufus

1
Cảm ơn câu trả lời tôi gần như làm tương tự nhưng với một thay đổi. $(obj).files[0].size/1024/1024; Nhưng đổi nó thànhobj.files[0].size/1024/1024;
shakir Baba

Có cách nào để mở rộng điều này để xác nhận chiều rộng và chiều cao không? (để lại một "tập tin" làm điểm bắt đầu và giả sử nó đề cập đến một hình ảnh)
jlmontesdeoca

@jlmontesdeoca Tôi nghĩ rằng bạn có thể đọc tệp với sự trợ giúp của vải và có được chiều cao và chiều rộng ở đây.
Arun Prasad ES

14

Không Có, sử dụng API tệp trong các trình duyệt mới hơn. Xem câu trả lời của TJ để biết chi tiết.

Nếu bạn cũng cần hỗ trợ các trình duyệt cũ hơn, bạn sẽ phải sử dụng trình tải lên dựa trên Flash như SWFUpload hoặc Uploadify để làm điều này.

Bản demo tính năng SWFUpload cho thấy cách file_size_limitcài đặt hoạt động.

Lưu ý rằng điều này (rõ ràng) cần Flash, cộng với cách thức hoạt động hơi khác so với các hình thức tải lên thông thường.


14

Nó khá đơn giản.

            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;
            }

Câu trả lời tốt nhất. ngọt ngào và đơn giản ... :)
A. Sinha

12

Nếu bạn đang sử dụng Xác thực jQuery, bạn có thể viết một cái gì đó như thế này:

$.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.'
);

4

Tôi đã làm một cái gì đó như thế:

$('#image-file').on('change', function() {
 var numb = $(this)[0].files[0].size/1024/1024;
numb = numb.toFixed(2);
if(numb > 2){
alert('to big, maximum is 2MB. You file size is: ' + numb +' MB');
} else {
alert('it okey, your file has ' + numb + 'MB')
}
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="file" id="image-file">


Điều này cho biết javascript, JQuery không có trong các thẻ
Hello234

3

Tôi sử dụng một chức năng Javascript chính mà tôi đã tìm thấy tại trang web Mozilla Developer Network https://developer.mozilla.org/en-US/docs/Using_files_from_web_appluggest , cùng với một chức năng khác với AJAX và thay đổi theo nhu cầu của tôi. Nó nhận được một id phần tử tài liệu liên quan đến vị trí trong mã html của tôi nơi tôi muốn viết kích thước tệp.

<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>

Chúc mừng


3

Mặc dù câu hỏi đã được trả lời, tôi muốn đăng câu trả lời của mình. Có thể có ích cho người xem trong tương lai. Bạn có thể sử dụng nó như trong đoạn mã sau.

<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");
    }
  }

3

Ví dụ về JQuery được cung cấp trong chuỗi này cực kỳ lỗi thời và google hoàn toàn không hữu ích vì vậy đây là bản sửa đổi của tôi:

 <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>

1

Bạn có thể dùng thử bộ nạp tiền này

Nó hoạt động tốt trong IE6 (trở lên), Chrome hoặc Firefox


3
Fine Uploader không thể xác thực kích thước tệp trong IE9 trở lên vì không hỗ trợ API tệp không được hỗ trợ. IE10 là phiên bản đầu tiên của Internet Explorer hỗ trợ API tệp.
Ray Nicholus

-2

Nếu bạn đặt Ie Mode Chế độ tài liệu 'thành' Tiêu chuẩn ', bạn có thể sử dụng phương pháp' kích thước 'javascript đơn giản để lấy kích thước tệp được tải lên.

Đặt 'Chế độ tài liệu' thành 'Tiêu chuẩn':

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

Hơn, sử dụng phương pháp javascript 'size' để lấy kích thước của tệp đã tải lên:

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

Nó làm việc cho tôi.


1
Điều này sẽ không hoạt động trong IE9 trở lên, bất kể bạn thêm thẻ meta nào.
Ray Nicholus
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.