업로드할 이미지의 미리보기
본문
게시판에서 첨부파일(에디터X)에 사진을 선택한 경우나
회원가입시에 회원이미지 선택하는 경우에 이미지가 안보이고
저장하고 다시 수정할때
이미지가 보이는데(게시판도 그렇게 수정해서 쓰고 있습니다. )
문득 궁금한것이
아예 게시판이든 회원이미지든
선택단계에 미리보기를 한번 보도록 하고자 하는데요.
그런 프리뷰 기능이 있는 게시판 또는 가입 스킨이나
그런기능이 구현된 팁을 찾다가 못찾아서 올려봅니다.
선택하자마자 업로드시키고 썸네일 보여줘야 하는거겠죠?
답변 2
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
var $wrap = $(input).parent();
if($wrap.find('.img_preview').length==0){
$wrap.append("<div><img class='img_preview'/></div>");
}
reader.onload = function(e) {
$('img.img_preview',$wrap).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(".frm_file ").change(function() {
readURL(this);
});
게시판 스킨의 write.skin.php 의 <script>안에다가 위 소스 넣어주시면 됩니다.
그누 5.3버전일경우 이미지가 아마 삐져나오지 싶습니다.
if($wrap.find('.img_preview').length==0){
$wrap.append("<div><img class='img_preview'/></div>");
}
위 부분을 조금 수정하시거나 하면 될거같네요.
감사합니다^^
구글링해서 html5소스 찾았습니다^^
<input id="fileUpload" type="file" multiple />
<div id="image-holder"></div>
$("#fileUpload").on('change', function () {
//Get count of selected files
var countFiles = $(this)[0].files.length;
var imgPath = $(this)[0].value;
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
var image_holder = $("#image-holder");
image_holder.empty();
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
if (typeof (FileReader) != "undefined") {
//loop for each file selected for uploaded.
for (var i = 0; i < countFiles; i++) {
var reader = new FileReader();
reader.onload = function (e) {
$("<img />", {
"src": e.target.result,
"class": "thumb-image"
}).appendTo(image_holder);
}
image_holder.show();
reader.readAsDataURL($(this)[0].files[i]);
}
} else {
alert("This browser does not support FileReader.");
}
} else {
alert("Pls select only images");
}
});
감사합니다 .이분이 나랑 비슷하게 겹치네. ㅎㅎ 센스가 있으신거 같아요
답변을 작성하시기 전에 로그인 해주세요.