코피페로 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.)
업로드한 후에는 이미지 파일을 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.)
<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.)
좋은 웹페이지 즐겨찾기
