设置预览块的css
<style type="text/css">
#uploadPreview {
width: 220px;
height: 138px;
background-position: center center;
background-size: cover;
border: 4px solid #fff;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
display: inline-block;
}
</style>
预览块js
<script type="text/javascript">
$(function(){
$("#uploadImage").on("change", function(){
// Get a reference to the fileList
var files = !!this.files ? this.files : [];
// If no files were selected, or no FileReader support, return
if (!files.length || !window.FileReader) return;
// Only proceed if the selected file is an image
if (/^image/.test( files[0].type)){
// Create a new instance of the FileReader
var reader = new FileReader();
// Read the local file as a DataURL
reader.readAsDataURL(files[0]);
// When loaded, set image data as background of div
reader.onloadend = function(){
//$("#uploadPreview").css("background-image", "url("+this.result+")");
$("#uploadPreview").attr("src", this.result);
}
}
});
});
</script>
jsp代码
<img src="" alt="" id="uploadPreview"/>
<input type="text" class="cover-bg" value="选择文件"/>
<input id="uploadImage" class="uploadInput" type="file" name="file"/>