Nhận kích thước tệp trước khi tải lên

Có cách nào để tìm ra kích thước tệp trước khi tải tệp lên bằng AJAX / PHP trong trường hợp thay đổi tệp đầu vào không?

Đối với HTML bên dưới

<input type="file" id="myFile" />

hãy thử những điều sau:

//binds to onchange event of your input field
$('#myFile').bind('change', function() {

  //this.files[0].size gets the size of your file.
  alert(this.files[0].size);

});

Xem chủ đề sau:

Làm thế nào để kiểm tra kích thước đầu vào của tệp với jQuery?

<script type="text/javascript">
function AlertFilesize(){
    if(window.ActiveXObject){
        var fso = new ActiveXObject("Scripting.FileSystemObject");
        var filepath = document.getElementById('fileInput').value;
        var thefile = fso.getFile(filepath);
        var sizeinbytes = thefile.size;
    }else{
        var sizeinbytes = document.getElementById('fileInput').files[0].size;
    }

    var fSExt = new Array('Bytes', 'KB', 'MB', 'GB');
    fSize = sizeinbytes; i=0;while(fSize>900){fSize/=1024;i++;}

    alert((Math.round(fSize*100)/100)+' '+fSExt[i]);
}
</script>

<input id="fileInput" type="file" onchange="AlertFilesize();" />

Làm việc trên IE và FF

Đây là một ví dụ đơn giản về việc lấy kích thước của tệp trước khi tải lên. Nó sử dụng jQuery để phát hiện bất cứ khi nào nội dung được thêm vào hoặc thay đổi, nhưng bạn vẫn có thể lấy files[0].sizemà không cần sử dụng jQuery.

$(document).ready(function() {
  $('#openFile').on('change', function(evt) {
    console.log(this.files[0].size);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
  <input id="openFile" name="img" type="file" />
</form>

Đây là một ví dụ đầy đủ hơn, một số bằng chứng về mã khái niệm để Kéo và Thả tệp vào FormData và tải lên qua POST lên máy chủ. Nó bao gồm một kiểm tra đơn giản cho kích thước tệp.

Tôi đã gặp vấn đề tương tự và có vẻ như chúng tôi chưa có giải pháp chính xác. Hy vọng điều này có thể giúp những người khác.

Sau thời gian tìm hiểu xung quanh, cuối cùng tôi đã tìm ra câu trả lời. Đây là mã của tôi để lấy tệp đính kèm với jQuery:

var attach_id = "id_of_attachment_file";
var size = $('#'+attach_id)[0].files[0].size;
alert(size);

Đây chỉ là mã ví dụ để lấy kích thước tệp. Nếu bạn muốn làm những thứ khác, vui lòng thay đổi mã để đáp ứng nhu cầu của bạn.

Giải pháp tốt nhất hoạt động trên tất cả các trình duyệt;)

function GetFileSize(fileid) {
    try {
        var fileSize = 0;
        // for IE
        if(checkIE()) { //we could use this $.browser.msie but since it's deprecated, we'll use this function
            // before making an object of ActiveXObject, 
            // please make sure ActiveX is enabled in your IE browser
            var objFSO = new ActiveXObject("Scripting.FileSystemObject");
            var filePath = $("#" + fileid)[0].value;
            var objFile = objFSO.getFile(filePath);
            var fileSize = objFile.size; //size in b
            fileSize = fileSize / 1048576; //size in mb 
        }
        // for FF, Safari, Opeara and Others
        else {
            fileSize = $("#" + fileid)[0].files[0].size //size in b
            fileSize = fileSize / 1048576; //size in mb 
        }
        alert("Uploaded File Size is" + fileSize + "MB");
    }
    catch (e) {
        alert("Error is :" + e);
    }
}

từ http://www.dotnet-tricks.com/Tutorial/jquery/HHLN180712-Get-file-size-before-upload-using-jquery.html

CẬP NHẬT: Chúng tôi sẽ sử dụng chức năng này để kiểm tra xem đó có phải là trình duyệt IE hay không

function checkIE() {
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)){  
        // If Internet Explorer, return version number
        alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
    } else {
        // If another browser, return 0
        alert('otherbrowser');
    }

    return false;
}

Các trình duyệt hỗ trợ HTML5 có thuộc tính tệp cho loại đầu vào. Điều này tất nhiên sẽ không hoạt động trong các phiên bản IE cũ hơn.

var inpFiles = document.getElementById('#fileID');
for (var i = 0; i < inpFiles.files.length; ++i) {
    var size = inpFiles.files.item(i).size;
    alert("File Size : " + size);
}

Giải pháp của ucefkh hoạt động tốt nhất, nhưng vì $ .browser không được chấp nhận trong jQuery 1.91, nên phải thay đổi để sử dụng Navigator.userAgent:

function IsFileSizeOk(fileid) {
    try {
        var fileSize = 0;
        //for IE
        if (navigator.userAgent.match(/msie/i)) {
            //before making an object of ActiveXObject, 
            //please make sure ActiveX is enabled in your IE browser
            var objFSO = new ActiveXObject("Scripting.FileSystemObject");
            var filePath = $("#" + fileid)[0].value;
            var objFile = objFSO.getFile(filePath);
            var fileSize = objFile.size; //size in b
            fileSize = fileSize / 1048576; //size in mb 
        }
        //for FF, Safari, Opeara and Others
        else {
            fileSize = $("#" + fileid)[0].files[0].size //size in b
            fileSize = fileSize / 1048576; //size in mb 
        }
        return (fileSize < 2.0);
    }
    catch (e) {
        alert("Error is :" + e);
    }
}

bạn cần thực hiện yêu cầu ajax HEAD để lấy kích thước tệp. với jquery nó giống như thế này

  var req = $.ajax({
    type: "HEAD",
    url: yoururl,
    success: function () {
      alert("Size is " + request.getResponseHeader("Content-Length"));
    }
  });

Vui lòng không sử dụng ActiveXvì rất có thể nó sẽ hiển thị thông báo cảnh báo đáng sợ trong Internet Explorer và khiến người dùng của bạn sợ hãi.

Nếu bất kỳ ai muốn thực hiện kiểm tra này, họ chỉ nên dựa vào đối tượng FileList có sẵn trong các trình duyệt hiện đại và chỉ dựa vào kiểm tra phía máy chủ cho các trình duyệt cũ hơn ( cải tiến liên tục ).

function getFileSize(fileInputElement){
    if (!fileInputElement.value ||
        typeof fileInputElement.files === 'undefined' ||
        typeof fileInputElement.files[0] === 'undefined' ||
        typeof fileInputElement.files[0].size !== 'number'
    ) {
        // File size is undefined.
        return undefined;
    }

    return fileInputElement.files[0].size;
}

Bạn có thể sử dụng chức năng kích thước tệp PHP. Trong quá trình tải lên bằng ajax, trước tiên hãy kiểm tra kích thước tệp bằng cách đưa ra yêu cầu ajax request tới php script để kiểm tra kích thước tệp và trả về giá trị.

Bạn có thể bằng cách sử dụng API tệp HTML5: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Tuy nhiên, bạn phải luôn có dự phòng cho PHP (hoặc bất kỳ ngôn ngữ phụ trợ nào khác mà bạn sử dụng) cho các trình duyệt cũ hơn.

Riêng tôi, tôi sẽ nói câu trả lời của Thế giới web là tốt nhất hiện nay, dựa trên các tiêu chuẩn HTML. Nếu bạn cần hỗ trợ IE <10, bạn sẽ cần sử dụng một số dạng ActiveX. Tôi sẽ tránh các đề xuất liên quan đến mã hóa chống lại Scripting.FileSystemObject hoặc khởi tạo ActiveX trực tiếp.

Trong trường hợp này, tôi đã thành công khi sử dụng các thư viện JS của bên thứ 3 như plupload có thể được định cấu hình để sử dụng các điều khiển HTML5 apis hoặc Flash / Silverlight để chèn lấp các trình duyệt không hỗ trợ những thứ đó. Plupload có API phía máy khách để kiểm tra kích thước tệp hoạt động trong IE <10.