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