업로드할 이미지의 미리보기 채택완료
망이망소이
6년 전
조회 5,135
게시판에서 첨부파일(에디터X)에 사진을 선택한 경우나
회원가입시에 회원이미지 선택하는 경우에 이미지가 안보이고
저장하고 다시 수정할때
이미지가 보이는데(게시판도 그렇게 수정해서 쓰고 있습니다. )
문득 궁금한것이
아예 게시판이든 회원이미지든
선택단계에 미리보기를 한번 보도록 하고자 하는데요.
그런 프리뷰 기능이 있는 게시판 또는 가입 스킨이나
그런기능이 구현된 팁을 찾다가 못찾아서 올려봅니다.
선택하자마자 업로드시키고 썸네일 보여줘야 하는거겠죠?
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
6년 전
</p>
<pre>
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);
});</pre>
<p>게시판 스킨의 write.skin.php 의 <script>안에다가 위 소스 넣어주시면 됩니다.
그누 5.3버전일경우 이미지가 아마 삐져나오지 싶습니다.
</p>
<pre>
if($wrap.find('.img_preview').length==0){
$wrap.append("<div><img class='img_preview'/></div>");
}</pre>
<p>위 부분을 조금 수정하시거나 하면 될거같네요.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
망이망소이
6년 전
감사합니다^^
댓글을 작성하려면 로그인이 필요합니다.
6년 전
구글링해서 html5소스 찾았습니다^^
<input id="fileUpload" type="file" multiple />
<div id="image-holder"></div>
</p>
<pre>
<code>$("#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");
}
});</code></pre>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
S
SㅣR어드민
3년 전
감사합니다 .이분이 나랑 비슷하게 겹치네. ㅎㅎ 센스가 있으신거 같아요
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인