별도의 조작을 위해 Filereader 함수에서 다양한 크기의 값 전달

Question

양식을 게시하기 전에 클라이언트 측 유효성 검사를 위해 이미지 파일의 크기를 확인하는 함수 getsize()을 포함하는 filesize.js이라는 FileReader JS 파일이 있습니다.

<script type="text/javascript" src="js/filesize.js"></script>

filesize.js :

function getsize(){ 
var oFile = document.getElementById("file").files[0]; // input box with type file; 
var reader = new FileReader(); 
reader.onload = function (e) { 
     console.log(e.total); // file size 
}; 
reader.readAsDataURL(oFile); 
fileSize = oFile.size; 
} 

이 기능은 파일이 입력에 onchange를 사용하여 업로드하지만 형태의 게시하기 전에 선택한 경우 실행 꼬리표.

<input type='file' name='file' id='file' onchange='getsize();' />

이 단 하나의 이미지 업로드 현재 선택된 파일의 크기를 가져옵니다 한 번에 업로드 할 수 있습니다. 내가 실행하고있는 문제는 getsize()이 비동기이며 아무리 노력해도 변수 fileSize을 이라는 별도의 동기 유효성 검사 함수에 전달하면 onsubmit을 사용하여 양식을 게시하기 전에 별도로 실행해야합니다.

<form name='add' action='process.php' method='post' enctype='multipart/form-data' onsubmit='return validate()'>

validate() 검사 몇 가지 다른 요소를 POST 폼을 허용하고 이미지를 업로드하기 전에. 그 중 하나는 현재 선택된 이미지의 파일 크기가 512KB 미만인지 확인하는 것입니다. 어떤 도움이라도 대단히 감사 할 것입니다.

Answer 1

콜백 기능을 사용해야합니다. 기본적으로 콜백 함수는 코드 조각 실행이 완료 될 때 실행되는 함수입니다. 귀하의 경우에는 콜백 기능을 통해 양식을 제출하십시오. this article을보십시오.