JavaScript & jQuery | jquery 파일업로드 미리보기 | |||||
---|---|---|---|---|---|
작성자 | 작성일 | 18-03-09 18:29 | |||
검색해본 결과 여러가지 방법이 있는데... 좋은정보가 있는곳을 찾아냈음.. 음... 좋긴 한데.. 한개의 이미지를 업로드 할때는 좋은데.. 여러개의 업로드 할때 미리보기 할때가 미리 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에서만 테스트하고 적용
|
|||||
|
|||||
|
댓글목록
등록된 댓글이 없습니다.