파일 업로드 기능이있는 양식이 있으며 사용자가 업로드하려고하는 파일이 너무 큰 경우 클라이언트 측 오류보고를 원합니다 .jQuery를 사용하여 파일 크기를 순수하게 검사하는 방법이 있습니까? 클라이언트에서 또는 어떻게 든 파일을 서버에 다시 게시하여 확인 하시겠습니까?
답변
실제로 파일 시스템에 액세스 할 수는 없지만 (예 : 로컬 파일 읽기 및 쓰기) HTML5 File Api 사양으로 인해 액세스 할 수있는 파일 속성이 있으며 파일 크기가 그 중 하나입니다.
아래 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);
});HTML5 사양의 일부이므로 최신 브라우저 (IE에는 v10 필요)에서만 작동 하며 알아야 할 다른 파일 정보에 대한 자세한 내용과 링크를 여기에 추가했습니다. http://felipe.sabino.me/javascript / 2012 / 01 / 30 / javascipt-checking-the-file-size /
오래된 브라우저 지원
이전 브라우저는 null이전 this.files호출에 대한 값을 반환 하므로 액세스 this.files[0]하면 예외가 발생 하므로 사용하기 전에 File API 지원을 확인 해야 합니다.
답변
jQuery를 사용하려면 validate다음 메소드를 작성하십시오.
$.validator.addMethod('filesize', function(value, element, param) {
// param = size (en bytes)
// element = element to validate (<input>)
// value = value of the element (file name)
return this.optional(element) || (element.files[0].size <= param)
});당신은 그것을 사용할 것입니다 :
$('#formid').validate({
rules: { inputimage: { required: true, accept: "png|jpe?g|gif", filesize: 1048576 }},
messages: { inputimage: "File must be JPG, GIF or PNG, less than 1MB" }
});답변
이 코드는 :
$("#yourFileInput")[0].files[0].size;양식 입력의 파일 크기를 반환합니다.
FF 3.6 이상에서이 코드는 다음과 같아야합니다.
$("#yourFileInput")[0].files[0].fileSize;답변
ASP.NET FileUpload컨트롤에 사용되는 솔루션도 게시하고 있습니다 . 아마도 누군가가 유용하다고 생각할 것입니다.
$(function () {
$('<%= fileUploadCV.ClientID %>').change(function () {
//because this is single file upload I use only first index
var f = this.files[0]
//here I CHECK if the FILE SIZE is bigger than 8 MB (numbers below are in bytes)
if (f.size > 8388608 || f.fileSize > 8388608)
{
//show an alert to the user
alert("Allowed file size exceeded. (Max. 8 MB)")
//reset file upload control
this.value = null;
}
})
});답변
아래를 사용하여 파일 크기를 확인하고 더 큰지 확인하십시오.
$("input[type='file']").on("change", function () {
if(this.files[0].size > 2000000) {
alert("Please upload file less than 2MB. Thanks!!");
$(this).val('');
}
});답변
이러한 유형의 검사는 Flash 또는 Silverlight에서는 수행 할 수 있지만 Javascript에서는 수행 할 수 없습니다. 자바 스크립트 샌드 박스는 파일 시스템에 대한 액세스를 허용하지 않습니다. 크기 확인은 업로드 된 후 서버 측에서 수행해야합니다.
Silverlight / Flash 경로로 이동하려면 기본 컨트롤을 사용하는 일반 파일 업로드 처리기가 기본값으로 설치되어 있지 않은지 확인할 수 있습니다. 이렇게하면 Silverlight / Flash가 설치되어 있으면 경험이 조금 더 풍부 해집니다.
답변
<form id="uploadForm" class="disp-inline" role="form" action="" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="file">
</form>
<button onclick="checkSize();"></button>
<script>
function checkSize(){
var size = $('#uploadForm')["0"].firstChild.files["0"].size;
console.log(size);
}
</script>표준 ajax / html5 메소드를 통해 양식을 제출하지 않으려는 경우 이것이 가장 쉬운 것으로 나타났습니다.
노트:
var size = $('#uploadForm')["0"]["0"].files["0"].size;이것은 작동했지만 더 이상 크롬이 아니며 위의 코드를 테스트했으며 ff와 chrome (마지막)에서 모두 작동했습니다. 두 번째 [ “0”]은 이제 firstChild입니다.
