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