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에서만 테스트하고 적용

 

댓글목록

등록된 댓글이 없습니다.

총 게시물 93 개, 페이지 1 RSS
제목 작성자
기타 인스타 토큰받아오기
기타 sns 공유하기 소스 - 라인, 폴라, 카톡, 카스, 밴드, 핀터레스트, 구글플러스, 네이버블로그, 트위터, 페이스북 H
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
오류해결 Strict Standards: Assigning the return value of new by reference is deprecated in /home/goodbook/pub… H
오류해결 array_keys() [function.array-keys]: The first argument should be an array in H
오류해결 phpize 실행 Cannot find autoconf. Please check your autoconf installation and the $PHP_AUTOCONF enviro… H
오류해결 [phpmyadmin]mysqli 확장모듈을 불러올 수 없습니다.<br />PHP 환경설정을 검사하십시오 H
오류해결 Apache 재시작시 (98)Address already in use: make_sock:could not bind to address 0.0.0.0:80 H
오류해결 httpd: Syntax error on line 106 of /usr/local/server/apache/conf/httpd.conf: Cannot load /usr/local/… H
게시물 검색