4
javascript FileReader API를 사용하여 파일 입력 필드에서 제공되는 이미지의 미리보기를 표시 할 수 있습니다. 이것은 이미지를 표시하기 위해 서버 측 PHP와 Ajax를 사용할 필요가 없다는 점에서 매우 유용합니다.javascript FileReader API를 사용할 때 파일 크기 제한이 있습니까?
사용되는 이미지 파일의 크기에 대한 제한이 :
내 질문은 생각이 무엇입니까? 사용자가 20MB의 이미지를 선택하는 것처럼, filereader가 이미지를 처리 할 수 있습니까? 그리고 머신 메모리가 잠재적으로 최대가 될 것입니까?
현재 컴퓨터에서 로컬로 테스트하고 있습니다. 나는 bmp 파일을로드하려고 시도했다. (53MB!) 페이지에서 처리하고 표시하는 데 약 15 초가 걸렸다. 1/2MB의 다른 파일은 일반적으로 즉시 표시됩니다. 파일 크기에 제한이 없습니다 나타납니다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Dropzone File Upload</title>
</head>
<body>
<img id="uploadPreview" src="default.png" style="width: 100px; height: 100px;" />
<input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" />
<p id="uploadProgress"> </p>
<script type="text/javascript">
function PreviewImage() {
var avatar_image = document.getElementById("uploadImage");
var avatar_preview = document.getElementById("uploadPreview");
var avatar_progress = document.getElementById("uploadProgress");
if (window.FileReader) { //if supports filereader
var imgReader = new FileReader();
imgReader.readAsDataURL(avatar_image.files[0]); //read from file input
imgReader.onloadstart = function(e) {
avatar_progress.innerHTML = "Starting to Load";
}
imgReader.onload = function (imgReaderEvent) {
//if file is image
if (
avatar_image.files[0].type == 'image/jpg' ||
avatar_image.files[0].type == 'image/jpeg' ||
avatar_image.files[0].type == 'image/png' ||
avatar_image.files[0].type == 'image/gif' ||
avatar_image.files[0].type == 'image/bmp'
) {
avatar_preview.src = imgReaderEvent.target.result;
}
else {
avatar_preview.src = 'filetype.png';
}
}
imgReader.onloadend = function(e) {
avatar_progress.innerHTML = "Loaded!";
}
}
/* For no support, use ActiveX instead */
else {
document.getElementById("uploadPreview").src = "nosupport.png";
}
};
</script>
</body>
</html>
[이 답변] (http://stackoverflow.com/questions/9265139/html5-filereader-api-crashes-chrome-17-when-reading-large-file-as-slice) 메모리가 기본임을 제안합니다. 한정. – kamituel
이와 같은 용량 문제는 항상 동일한 대답을 가지고 있습니다. 그렇지 않을 때까지 작동하고 클라이언트 기능에 따라 다릅니다. 값싼 스마트 폰은 RAM이 많은 데스크톱 컴퓨터만큼 용량이 없습니다. – Pointy