上传图片时使用Js预览

一段上传图片并JS预览图片的代码

<html>
<head>
<style>
#uploadPreview {
    width: 168px;
    height: 168px;                          
    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>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
$(window).ready(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(){
			console.log(this.result);
		   $("#uploadPreview").css("background-image", "url("+this.result+")");
			
			}
		}
	});
})
</script>

</head>
<body>
<div id="uploadPreview"></div>
<input id="uploadImage" type="file" name="photoimage" class="fimg1">

</body></html>

1

热门评论