使用jQuery在上传图片之前实现缩略图预览
jQuery代码
01 |
$("#uploadImage").on("change", function(){ |
02 |
// Get a reference to the fileList |
03 |
var files = !!this.files ? this.files : []; |
04 |
|
05 |
// If no files were selected, or no FileReader support, return |
06 |
if (!files.length || !window.FileReader) return; |
07 |
|
08 |
// Only proceed if the selected file is an image |
09 |
if (/^image/.test( files[0].type)){ |
10 |
|
11 |
// Create a new instance of the FileReader |
12 |
var reader = new FileReader(); |
13 |
|
14 |
// Read the local file as a DataURL |
15 |
reader.readAsDataURL(files[0]); |
16 |
|
17 |
// When loaded, set image data as background of div |
18 |
reader.onloadend = function(){ |
19 |
|
20 |
$("#uploadPreview").css("background-image", "url("+this.result+")"); |
21 |
|
22 |
} |
23 |
|
24 |
} |
25 |
|
26 |
}); |
以下是HTML代码，包含一个显示缩略图的div和一个file input field。
HTML代码
1 |
<div id="uploadPreview"></div> |
2 |
<input id="uploadImage" type="file" name="photoimage" class="fimg1" onchange="PreviewImage();" /> |
为我们的缩略图设置CSSwa 。
CSS代码
1 |
<strong>#uploadPreview { |
2 |
width: 168px; |
3 |
height: 168px; |
4 |
background-position: center center; |
5 |
background-size: cover; |
6 |
border: 4px solid #fff; |
7 |
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3); |
8 |
display: inline-block;</strong> |