게시판.이미지.Image.Upload
JavaScript, ECMAScript반응형
# 참조 : https://dahanweb.tistory.com/58
# 서버 사이드 코드는 없음.
test.imageuploadboard / index.html
<html>
<head>
<script type="text/javascript" src="/jquery.plugin/1.11.2/jquery-1.11.2.min.js"></script>
<script>
function readInputFile(e)
{
var sel_files = [];
sel_files = [];
$("#imagePreview").empty();
var files = e.target.files;
var fileArr = Array.prototype.slice.call(files);
var index = 0;
fileArr.forEach(function(f)
{
if (!f.type.match("image/.*"))
{
alert("이미지 확장자만 업로드 가능합니다.");
return;
};
if(files.length < 11)
{
sel_files.push(f);
var reader = new FileReader();
reader.onload = function(e)
{
var html = `<a id=img_id_${index}><img src=${e.target.result} data-file=${f.name} /></a>`;
$('#imagePreview').append(html);
index++;
};
reader.readAsDataURL(f);
}
})
if(files.length > 11){
alert("최대 10장까지 업로드 할 수 있습니다.");
}
}
</script>
</head>
<body>
<form>
<input type="file" id="real-input" class="image_inputType_file" accept="img/*" required multiple>
</form>
<button class="browse-btn">사진업로드</button>
<h3>이미지 미리보기</h3>
<div id="imagePreview">
<img id="img" />
</div>
<script>
$("#real-input").on("change",readInputFile);
const browseBtn = document.querySelector(".browse-btn");
const realInput = document.querySelector("#real-input");
browseBtn.addEventListener("click",()=>{ realInput.click(); });
</script>
</body>
</html>반응형
'JavaScript, ECMAScript' 카테고리의 다른 글
| Chrome.Console.elapsed.time.시간측정 (0) | 2022.12.03 |
|---|---|
| 음성,Speak,Speech (0) | 2022.12.01 |
| Chrome Browser Rendering FPS 측정 (0) | 2022.11.20 |
| Indexed DB (0) | 2022.08.03 |
| 디버깅.Debugging.VSC.VisualStudioCode.연동 (0) | 2022.07.28 |