本地上传图片后立即显示（转载，FileReader用法参见另一篇）

来源：互联网发布：淘宝网u盘编辑：程序博客网时间：2024/06/05 10:41

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="UI/Public/js/jquery.min.js"></script>
<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>
</head>

<body>

<img id="uploadPreview"/>
<input id="uploadImage" type="file" name="photoimage" class="fimg1" onchange="PreviewImage();" />

</body>

<script>

$("#uploadImage").on("change", function(ele){
// 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(){
$("#uploadPreview").attr('src',this.result);

}

}

});
</script>
</html>

0 0