JavaScript & jQuery | jquery 파일업로드 미리보기
작성자
검색해본 결과 여러가지 방법이 있는데...
좋은정보가 있는곳을 찾아냈음..
 
음... 좋긴 한데..
한개의 이미지를 업로드 할때는 좋은데..
여러개의 업로드 할때 미리보기 할때가 미리 id를 정해주는 문제도 불편하고
소스도 길어진다는 생각에..조금 변경을 해서 사용해야겠다 생각..
 
<script language="JavaScript" src="/index/include/jquery.min.js"></script>
<script language="javascript">
    var setPreview = function(opt) {
        var inputFile = opt.inputFile.get(0);
        var img = opt.img.get(0);
        // FileReader
        if (window.FileReader) {
            // image 파일만
            if (!inputFile.files[0].type.match(/image\//)) return;
            // preview
            try {
                var reader = new FileReader();
                reader.onload = function(e) {
                    img.src = e.target.result;
                    img.style.width = opt.w + 'px';
                    img.style.height = opt.h + 'px';
                    img.style.display = '';
                }
                reader.readAsDataURL(inputFile.files[0]);
            } catch (e) {
                // exception...
            }
            // img.filters (MSIE)
        } else if (img.filters) {
            inputFile.select();
            inputFile.blur();
            var imgSrc = document.selection.createRange().text;
            img.style.width = opt.w + 'px';
            img.style.height = opt.h + 'px';
            img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enable='true',sizingMethod='scale',src=\"" + imgSrc + "\")";
            img.style.display = '';
            // no support
        } else {
            // Safari5, ...
        }
    }
    $(function() {
        $('.img_upload').change(function() {
            var opt = {
                inputFile: $(this),
                img: $($(this).attr('img_target')),
                w: $($(this).attr('img_target')).width(),
                h: $($(this).attr('img_target')).height()
            };
            setPreview(opt);
        });
    });
</script>
<img src="" name="test_img1" id="test_img1" width="234" height="135"><br>
<input type="file" name="main_img_1" id="main_img_1" style="width:200px;border:0;font-size:12px" class="img_upload" img_target="#test_img1">
<br><br><br>
<img src="" name="test_img2" id="test_img2" width="234" height="135"><br>
<input type="file" name="main_img_2" id="main_img_2" style="width:200px;border:0;font-size:12px" class="img_upload" img_target="#test_img2">

계속 추가해서 사용해도 잘 됨..
어차피 여러부라우져에서 된다는 소스는 가져온거라..
크롬, 익스11에서만 테스트하고 적용

 

댓글목록

등록된 댓글이 없습니다.

총 게시물 12 개, 페이지 1 RSS
제목 작성자
JavaScript & jQuery jQuery 다수의 Ajax 요청 처리 관련 H
JavaScript & jQuery parent() 활용 - 클릭한 클래스의 상위 클래스 찾아서 hide() H
JavaScript & jQuery 스크롤바 상단 고정메뉴 H
JavaScript & jQuery jquery 해당 클래스안에서 iframe name찾기, iframe과 iframe간 제어 H
JavaScript & jQuery jquery 파일업로드 미리보기 H
JavaScript & jQuery 'jquery date picker' 시작날짜 이후로 마지막날짜 달력 보이기 H
JavaScript & jQuery 정수로 반환하면서 NaN일때 0으로 처리 H
JavaScript & jQuery jQuery Ajax 한글 깨짐 해결방법 H
JavaScript & jQuery NaN시 처리 H
JavaScript & jQuery 전화번호 입력시 자동 하이픈(-) 붙이기 H
JavaScript & jQuery 모든부라우져에서 즐겨찾기 기능 넣기 H
JavaScript & jQuery 함수가 존재하면 실행하기 H
게시물 검색