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.onload=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>

效果图