업로드하기 전에 파일 크기 가져 오기

입력 파일 변경시 AJAX / PHP를 이용하여 파일을 업로드하기 전에 파일 크기를 알 수있는 방법이 있나요?

HTML 벨로우즈

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

다음을 시도하십시오.

//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);

});

다음 스레드를 참조하십시오.

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();" />

IE 및 FF 작업

다음은 업로드하기 전에 파일 크기를 가져 오는 간단한 예입니다. 콘텐츠가 추가되거나 변경 될 때마다 감지하기 위해 jQuery를 사용하고 있지만 files[0].sizejQuery를 사용하지 않고도 얻을 수 있습니다 .

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

다음은 파일을 FormData 로 드래그 앤 드롭 하고 POST를 통해 서버에 업로드 하는 개념 증명 코드 입니다. 여기에는 파일 크기에 대한 간단한 검사가 포함됩니다.

나는 같은 문제가 있었고 정확한 해결책이 없었던 것 같습니다. 이것이 다른 사람들을 도울 수 있기를 바랍니다.

시간을내어 둘러 본 후 마침내 답을 찾았습니다. 이것은 jQuery로 파일 첨부를 얻는 코드입니다.

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

이것은 파일 크기를 가져 오는 예제 코드입니다. 다른 작업을하려면 필요에 맞게 코드를 자유롭게 변경하십시오.

모든 브라우저에서 작동하는 최상의 솔루션;)

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

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

업데이트 : 이 기능을 사용하여 IE 브라우저인지 확인합니다.

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

HTML5를 지원하는 브라우저에는 입력 유형에 대한 파일 속성이 있습니다. 물론 이전 IE 버전에서는 작동하지 않습니다.

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

ucefkh의 솔루션이 가장 잘 작동했지만 $ .browser가 jQuery 1.91에서 더 이상 사용되지 않기 때문에 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);
    }
}

파일 크기를 얻으려면 ajax HEAD 요청을 수행해야합니다. jquery를 사용하면 다음과 같습니다.

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

ActiveXInternet Explorer에서 무서운 경고 메시지를 표시하고 사용자를 놀라게 할 가능성이 있으므로 사용하지 마십시오 .

이 검사를 구현하려는 사람은 최신 브라우저에서 사용할 수 있는 FileList 개체 에만 의존하고 이전 브라우저에 대해서만 서버 측 검사에 의존해야합니다 ( 점진적 향상 ).

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

PHP 파일 크기 기능을 사용할 수 있습니다. ajax를 사용하여 업로드하는 동안 파일 크기를 확인하고 값을 반환하는 php 스크립트에 ajax 요청을 요청하여 파일 크기를 먼저 확인하십시오.

HTML5 파일 API를 사용하여 할 수 있습니다 : http://www.html5rocks.com/en/tutorials/file/dndfiles/

그러나 이전 브라우저에는 항상 PHP (또는 사용하는 다른 백엔드 언어)에 대한 대체가 있어야합니다.

개인적으로 HTML 표준을 고려할 때 Web World의 답변 이 오늘날 최고 라고 말하고 싶습니다 . IE <10을 지원해야하는 경우 ActiveX 형식을 사용해야합니다. Scripting.FileSystemObject에 대해 코딩하거나 ActiveX를 직접 인스턴스화하는 것과 관련된 권장 사항은 피할 것입니다.

이 경우 HTML5 API 또는 Flash / Silverlight 컨트롤을 사용하여 지원하지 않는 브라우저를 백필하도록 구성 할 수있는 plupload 와 같은 타사 JS 라이브러리를 사용하여 성공했습니다 . Plupload에는 IE <10에서 작동하는 파일 크기를 확인하기위한 클라이언트 측 API가 있습니다.