입력 파일 변경시 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].size
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>
다음은 파일을 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);
}
}
업데이트 :
이 기능을 사용하여 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;
}
답변
$(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>
답변
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);
}