JS file点击图片并图片的显示和上传

39 阅读 0 评论 26 点赞

我是靠谱客的博主忐忑西牛，最近开发中收集的这篇文章主要介绍JS file点击图片并图片的显示和上传，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

HTML 代码

<input type="file"  id="imgfile" value="" οnchange="f_change(this);" >
<img alt="图片" src="" id="img">

JS 代码

<script type="text/javascript">
//创建一个FileReader对象可以理解成 临时文件
var reader = new FileReader();
function f_change(file){
	var img = document.getElementById('img');
	//读取File对象的数据
	reader.onload = function(evt){
		//data:img base64 编码数据显示
		img.width  =  "100";
        img.height =  "100";
        //临时文件和图片建立连接
		img.src = evt.target.result;
	}
	//把点击文件结果数据放在 临时文件
    reader.readAsDataURL(file.files[0]);
} 
</script>