여기에서는 File API에 대해 자세히 설명하지 않습니다. 이제 파일 핸들을 사용하여 FileReader 인터페이스를 통해 비동기적으로 로드할 수 있습니다. 파일 내용을 메모리에 저장하고 이를 js 변수에 할당합니다.
함수 getImgSrc(대상, 콜백) {
If (window.FileReader) {
var oPreviewImg = null, oFReader = 새 창.FileReader();
oFReader.onload = 함수(oFREvent) {
oPreviewImg = 새 이미지();
var type = target.files[0].type.split("/")[1];
var src = oFREvent.target.result;
oPreviewImg.src = src;
If (콜백 유형 == "함수") {
콜백(oPreviewImg, 대상, 유형, src);
}
oPreviewImg.src 반환;
};
return (함수 () {
var aFiles = target.files;
if (aFiles.length === 0) {
반품;
}
If (!IsImgType(aFiles[0].type)) {
Alert("올바른 이미지 파일을 선택해야 합니다!");
반품;
}
If (aFiles[0].size > 1024 * 1024) {
target.value = "";
Alert('1M 이하의 이미지 파일을 업로드해주세요.');
반품;
}
oFReader.readAsDataURL(aFiles[0]);
})();
}
If (navigator.appName === "Microsoft Internet Explorer") {
return (함수 () {
document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = target.value;
})();
}
}
위는 fileReader와 결합된 자바스크립트를 사용하여 이미지를 업로드하는 키 코드입니다.