代码实现和解析
一、关于<input type="file" name="" id="file"/>
其files属性记录了你放入其中的文件，所以你可以此处可以通过
img=document.getElementById("file").files[0] 的方式获取你的上传的图片实例，但是也需要你注意，如果使用jquery的$(“#file”)是无法获取到你files的属性。
二、关于FileReader()对象
FileReader()是H5支持的浏览器缓存文件的对象，所以你上传(未提交到服务器)的文件全部会缓存在浏览器中，可以通过这个对象获取。
1、新建一个实例 var reader=new FileReader();
2、将相关的文件传给其reader.readAsDataURL(img);
3、当文件全部加载到浏览器内存后的回调函数。reader.onload=function(){ ... ...}
4、将你的文件的源传给img.但是要注意的是你的如果先前以及创建好了img是无法改变其src的属性的所以你必须要去动态的创建img然后再通过append(）的方式去放入到相关的div中去。
eg:$("#img1").append("<img src="+reader.result+" />");
完整的实例如下参考:
<!DOCTYPE html>
<html>
<head>
<title>HTML5上传图片预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
</head>
<body>
<input type="file" name="" id="file"/>
<div id="img1" style="width: 100px;height: 100px;"></div>
<script type="text/javascript">
$("#file").change(function(){
img=document.getElementById("file").files[0]
var reader=new FileReader();
reader.readAsDataURL(img);
reader.onload=function(e){
$("#img1").append("<img src="+reader.result+" />");
}
})
</script>
</body>
</html>
865
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
