Javaweb項目圖片上傳實現預覽

圖片上傳前想要把選擇的圖片顯示在頁面上以及將input標籤的文件選擇格式美化；

<div class="wrap">
                            <span>正面圖</span>
                            <input id="fileupload" class="file" type="file" name="pic1" onChange="preview(this)"/>
                </div>
                <div id="preview"></div>


                <div class="wrap">
                            <span>側面圖</span>
                            <input id="fileupload" class="file" type="file" name="pic2" onChange="preview(this)"/>
                </div>
                <div id="preview1"></div>

                <div class="wrap">
                            <span>背面圖</span>
                            <input id="fileupload" class="file" type="file" name="pic3" onChange="preview(this)"/>
                </div>

                <div id="preview2"></div>

格式美化需要css

.wrap{
                width:150px;
                position:relative;
                overflow:hidden;
                margin-right:4px;
                display:inline-block;
                padding:4px 10px;
                line-height:18px;
                text-align:center;
                vertical-align:middle;
                cursor:pointer;
                background:rgb(217,237,247);
                border-radius:4px;
                -webkit-border-radius:4px;
                -moz-border-radius:4px;
                margin-top: 10px;
                float:left;
            }
            .wrap span{             
                color:black;
                font-size: 16px;
            } 
            #fileupload{
                height: 20px;
            }
            .wrap .file{

                position:absolute;
                top:0;
                right:0;
                margin:0;
                border:solid transparent;
                opacity:0;
                filter:alpha(opacity=0);
                cursor: pointer;
            } 

圖片實現預覽，需要用腳本

<script type="text/javascript">  
                 function preview(file){  
                        var div = $(file).parent().next();
                        if(file.files&&file.files[0]){  
                             var reader=new FileReader(); 

                             reader.οnlοad=function(evt){  

                                div.html('<img  src="'+evt.target.result+'"/>');   
                             }  
                                reader.readAsDataURL(file.files[0]);  

                            }else{  
                            prevDiv.innerHTML='<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader">';   
                          }  


             }  
        </script>

效果圖