이미지를 업로드할 때 이미지를 첨부하면 이미지를 표시하는 프로그램을 만드는 방법
이번 제작하는 것은 다음과 같은 기능입니다.
사전 준비
우선, 다음과 같이 디렉토리와 파일과 적당한 이미지가 들어있는 디렉토리(이 이미지에서는 image-change라는 이름)를 임의의 장소에 작성해 둡니다.
HTML 설명
index.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/layout.css">
</head>
<body>
<output id="output-image"></output>
<p>※画像を選択してください</p><br>
<input type="file" id="image-field" onchange="outputReadFile()">
</body>
</html>
CSS 설명
layout.cssimg{
width:200px;
}
자바 스크립트 설명
script.jsfunction outputReadFile() {
var file = event.target.files[0]; // 添付ファイルのデータを変数fileに格納
initializeFile(); //初期化
if(file){ //ファイルが添付されている場合
var outputData = new FileReader; // FileReaderを作成
outputData.readAsDataURL(file); // ファイルの読み込み
outputData.onload = outputFile(); // ファイルの読み取りを終えたタイミングでoutputFile関数を実行
function outputFile(){ // 添付画像のhtmlを作成
return function(event) {
var img = document.createElement('img'); //img要素を生成
img.src = event.target.result; //添付画像の場所を指定
var outputImage = document.getElementById('output-image'); // outputタグのidを読み込み
outputImage.insertBefore(img, null); // outputタグの中に添付画像のimgタグを出力
$('p').remove(); // p要素の"※画像を選択してください"を削除
};
};
}else{ //ファイルが添付されていない場合
var p = document.createElement('p'); // p要素生成
p.innerHTML="※画像を選択してください" // p要素の内容を追加
var outputImage = document.getElementById('output-image'); //outputタグのidを取得
outputImage.after(p); //outputタグの後にp要素を追加
}
function initializeFile(){
var outputImage = document.getElementById('output-image'); //outputタグのidを取得
outputImage.innerHTML = ''; //outputタグの中身を削除
};
};
마지막으로
HTML과 CSS를 스스로 커스터마이즈 하면, 여러가지(예를 들면, 앱내의 프로필 화상의 편집시나 기사의 투고시등에서) 응용할 수 있으므로 편리합니다.
뭔가 질문 등 있으면 코멘트에서 부디.
Reference
이 문제에 관하여(이미지를 업로드할 때 이미지를 첨부하면 이미지를 표시하는 프로그램을 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hasegawa-naoto/items/9c81159f4c8d6b82ffb4
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/layout.css">
</head>
<body>
<output id="output-image"></output>
<p>※画像を選択してください</p><br>
<input type="file" id="image-field" onchange="outputReadFile()">
</body>
</html>
CSS 설명
layout.cssimg{
width:200px;
}
자바 스크립트 설명
script.jsfunction outputReadFile() {
var file = event.target.files[0]; // 添付ファイルのデータを変数fileに格納
initializeFile(); //初期化
if(file){ //ファイルが添付されている場合
var outputData = new FileReader; // FileReaderを作成
outputData.readAsDataURL(file); // ファイルの読み込み
outputData.onload = outputFile(); // ファイルの読み取りを終えたタイミングでoutputFile関数を実行
function outputFile(){ // 添付画像のhtmlを作成
return function(event) {
var img = document.createElement('img'); //img要素を生成
img.src = event.target.result; //添付画像の場所を指定
var outputImage = document.getElementById('output-image'); // outputタグのidを読み込み
outputImage.insertBefore(img, null); // outputタグの中に添付画像のimgタグを出力
$('p').remove(); // p要素の"※画像を選択してください"を削除
};
};
}else{ //ファイルが添付されていない場合
var p = document.createElement('p'); // p要素生成
p.innerHTML="※画像を選択してください" // p要素の内容を追加
var outputImage = document.getElementById('output-image'); //outputタグのidを取得
outputImage.after(p); //outputタグの後にp要素を追加
}
function initializeFile(){
var outputImage = document.getElementById('output-image'); //outputタグのidを取得
outputImage.innerHTML = ''; //outputタグの中身を削除
};
};
마지막으로
HTML과 CSS를 스스로 커스터마이즈 하면, 여러가지(예를 들면, 앱내의 프로필 화상의 편집시나 기사의 투고시등에서) 응용할 수 있으므로 편리합니다.
뭔가 질문 등 있으면 코멘트에서 부디.
Reference
이 문제에 관하여(이미지를 업로드할 때 이미지를 첨부하면 이미지를 표시하는 프로그램을 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hasegawa-naoto/items/9c81159f4c8d6b82ffb4
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
img{
width:200px;
}
script.js
function outputReadFile() {
var file = event.target.files[0]; // 添付ファイルのデータを変数fileに格納
initializeFile(); //初期化
if(file){ //ファイルが添付されている場合
var outputData = new FileReader; // FileReaderを作成
outputData.readAsDataURL(file); // ファイルの読み込み
outputData.onload = outputFile(); // ファイルの読み取りを終えたタイミングでoutputFile関数を実行
function outputFile(){ // 添付画像のhtmlを作成
return function(event) {
var img = document.createElement('img'); //img要素を生成
img.src = event.target.result; //添付画像の場所を指定
var outputImage = document.getElementById('output-image'); // outputタグのidを読み込み
outputImage.insertBefore(img, null); // outputタグの中に添付画像のimgタグを出力
$('p').remove(); // p要素の"※画像を選択してください"を削除
};
};
}else{ //ファイルが添付されていない場合
var p = document.createElement('p'); // p要素生成
p.innerHTML="※画像を選択してください" // p要素の内容を追加
var outputImage = document.getElementById('output-image'); //outputタグのidを取得
outputImage.after(p); //outputタグの後にp要素を追加
}
function initializeFile(){
var outputImage = document.getElementById('output-image'); //outputタグのidを取得
outputImage.innerHTML = ''; //outputタグの中身を削除
};
};
마지막으로
HTML과 CSS를 스스로 커스터마이즈 하면, 여러가지(예를 들면, 앱내의 프로필 화상의 편집시나 기사의 투고시등에서) 응용할 수 있으므로 편리합니다.
뭔가 질문 등 있으면 코멘트에서 부디.
Reference
이 문제에 관하여(이미지를 업로드할 때 이미지를 첨부하면 이미지를 표시하는 프로그램을 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hasegawa-naoto/items/9c81159f4c8d6b82ffb4
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(이미지를 업로드할 때 이미지를 첨부하면 이미지를 표시하는 프로그램을 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hasegawa-naoto/items/9c81159f4c8d6b82ffb4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
