JS 로 컬 이미지 구현 온라인 이미지 미리 보기 서버 업로드 필요 없 음

<div id="preview">div>  
<input type="file" onchange="preview(this)" />

<style type="text/css">  
        #preview, .img, img  
        {  
        width:200px;  
        height:200px;  
        }  
        #preview  
        {  
        border:1px solid #000;  
        }  
    style>  

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  

"text/javascript"</span>>    
        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">preview</span>(<span class="hljs-title">file</span>)  </span>
        {  
            var prevDiv = document.getElementById(<span class="hljs-string">'preview'</span>);  
            <span class="hljs-keyword">if</span> (<span class="hljs-built_in">file</span>.<span class="hljs-built_in">files</span> && <span class="hljs-built_in">file</span>.<span class="hljs-built_in">files</span>[<span class="hljs-number">0</span>])  
            {  
                var reader = <span class="hljs-built_in">new</span> FileReader();  
                reader.onload = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-title">evt</span>){  </span>
                    prevDiv.innerHTML = <span class="hljs-string">'<img src="'</span> + evt.target.<span class="hljs-built_in">result</span> + <span class="hljs-string">'" />'</span>;  
                }    
                reader.readAsDataURL(<span class="hljs-built_in">file</span>.<span class="hljs-built_in">files</span>[<span class="hljs-number">0</span>]);  
            }  
            <span class="hljs-keyword">else</span>    
            {  
                prevDiv.innerHTML = <span class="hljs-string">'<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\''</span> + <span class="hljs-built_in">file</span>.<span class="hljs-built_in">value</span> + <span class="hljs-string">'\'"></div>'</span>;  
            }  
         }