使用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> |