이미지 업로드 시 미리보기 javascript

데모

http://demo.phpgang.com/jquery-show-image-thumbnail-before-upload/

jQuery:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<script type="text/javascript"> $(function() {     $("#uploadFile").on("change", function()     {         var files = !!this.files ? this.files : [];         if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support           if (/^image/.test( files[0].type)){ // only image file             var reader = new FileReader(); // instance of the FileReader             reader.readAsDataURL(files[0]); // read the local file               reader.onloadend = function(){ // set image data as background of div                 $("#imagePreview").css("background-image", "url("+this.result+")");             }         }     }); }); </script>

Above jQuery work on onChange event of your file upload field and add image in background of give div.

HTML:

1 2	<div id="imagePreview"></div> <input id="uploadFile" type="file" name="image" class="img" />

CSS used for image div in which we preview thumbnail:

1 2 3 4 5 6 7 8 9 10

<style> #imagePreview {     width: 180px;     height: 180px;     background-position: center center;     background-size: cover;     -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);     display: inline-block; } </style>

출처

http://www.phpgang.com/how-to-show-image-thumbnail-before-upload-with-jquery_573.html

+ 추가

여러 개에 적용하기

//공통 기능 : 이미지 업로드 시 미리보기     $("input[type=file]").on("change", function() {         var provider = $(this).attr("id");     var receiver = "preview_"+provider.substring(provider.indexOf("_")+1, provider.length );       //   console.log("provider ["+ $(this).attr("id") +"]"+", receiver ["+receiver+"]" );   //   console.log("provider.files === "+provider.files);         var files = !!this.files ? this.files : [];         if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support           if (/^image/.test( files[0].type)){ // only image file             var reader = new FileReader(); // instance of the FileReader             reader.readAsDataURL(files[0]); // read the local file               reader.onloadend = function(){ // set image data as background of div                 $("#"+receiver).css({"background-image":"url("+this.result+")"});             }         }     });