井井客

搜索

JS单张图片上传本地预览(dataURL-base64)

利用Js实现file上传图片的本地预览功能,主要用到了html5提供的FileReader接口,及该接口中的readAsDataURL方法来实现的base64编码。

JS单张图片上传本地预览(dataURL-base64)

先说明一下这个的兼容性还比较弱,谷歌的兼容比较好,所以我拿谷歌测试的。里面用到了html5提供的接口(所以大家都懂的~)

这段代码也只是练习测试所用,JS上传图片预览这个问题是在给朋友网站帮忙时遇到的,因为需求主要就是预览图片但不上传,而之前接触的就是上传之后把图片地址呈现的这种方法(而且都是php程序去做这块的),所以这方面知识还比较弱,百度了比较久,找到了一个相对容易理解的方法,也算是给自己抛砖引玉,为以后的学习做个铺垫。

代码如下:

<!DOCTYPE html>
<html>
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     
<title>JS单张图片上传本地预览(dataURL-base64)</title>     
<style type="text/css">
#view { margin-bottom:15px; border:1px solid #ccc; background:#fafafa; line-height:180px; text-align:center; color:#aaa;}
#view,#view img { width:260px; height:180px; }
</style>
 </head>     
<body>
<div id="view">图片在此显示</div>
<input type="file" id="file"/>
<script type="text/javascript">
	var $file = document.getElementById('file'),
		$view = document.getElementById('view');
	$file.onchange = function(ele){
		if(typeof FileReader != 'undefined' && typeof $file.files != 'undefined'){
			if(/^image\//.test($file.files[0].type)){
				var reader = new FileReader();
				reader.readAsDataURL($file.files[0]);
				reader.onload = function(e){
					$view.innerHTML='<img src="' + this.result +'" />';
				}
			}else{
				$view.innerHTML='图片在此显示';
				$file.value = '';
				$file.name = '';
				alert('请选择正确的图片文件!');
			}
		}else{
			alert('你的浏览器不支持该功能');
		}
	}
</script>   
</body>     
</html>

因为这段代码已经是简略版的了,所以逻辑还是比较容易看清楚的。
因为我自己也有一点小迷糊所以就不多说了。有兴趣的话可以百度这类比较兼容的方法来实现。

另外推荐一个百度的图片上传插件:webuploader,具体地址:http://fex.baidu.com/webuploader/。功能和兼容看上去都还不错~

最后发一个感觉还好的文章,中间有介绍FileReader其它的几个方法:http://blog.csdn.net/zk437092645/article/details/8745647

文章TAG:js,html5

作者:井井客原创来源:原创
本文标题:JS单张图片上传本地预览(dataURL-base64)
本文链接:http://www.jingjingke.com/c/01137.html

上一篇:LazyLoad.js懒加载图片插件的使用方法
下一篇:jS原生获取页面中所有的checkbox

文章分类

相关阅读

随便看看