코피페로 OK! 업로드 한 이미지를 즉시 브라우저에 반영합시다.
소개
이미지를 업로드하면 즉시 이미지 미리보기를보고 싶을 때 있습니다. 그렇지만 Ajax를 도입하거나 하는 것은 귀찮다. 그럴 때 바로 사용할 수 있도록 html에 copipe로 구현할 수 있도록했습니다.
[Before]
[After]
메커니즘
업로드한 후에는 이미지 파일을 base64 문자열로 변환하고 src 속성에 할당합니다.
소스 코드
sample.html
<img id="image" style="display: none;" /> <!-- 画像表示する場所-->
<input id="file_upload" type="file" /> <!-- 画像をアップロード -->
<script>
document.getElementById("file_upload").addEventListener("change", selectedFile, false);
function selectedFile(event) {
let files = event.target.files || event.dataTransfer.files;
showImage(files[0]);
}
function showImage(imagedata) {
let file = imagedata;
let fileReader = new FileReader();
// 読み込み完了時の処理を追加
fileReader.onload = function() {
const url = this.result;
const image = document.getElementById("image");
image.style.display = "block"; // display:none;を上書き
image.src = url;
};
// ファイルの読み込み(Data URI Schemeの取得)
fileReader.readAsDataURL(file); //画像表示
}
</script>
Reference
이 문제에 관하여(코피페로 OK! 업로드 한 이미지를 즉시 브라우저에 반영합시다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Ryota-Onuma/items/c3165be6d9c34c9b4074텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
