ajax显示input上传的文件图像
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax显示上传的图像文件</title>
</head>
<body>
<h1>需要自己导入jquery</h1>
<form action="" enctype="multi/form-data">
<input type="file" id="id_input">
<img src="" alt="" id="id_img">
</form>
<script>
//找到头像input标签绑定change事件
$("#id_input").change(function()/{
// 创建一个读取文件的对象
var fileReader = new FileReader();
// 取当前选中的头像文件
console.log(this.files[0]);
// 读取你选中的那个文件
fileReader.readAsDataURL(this.files[0]);
// 由于读取文件需要事件
fileReader.onload = function(){
// 等到文件读取完毕之后,将图片加载到img标签之中
$("id_img").attr("src", fileReader.result);
};
})
</script>
</body>
</html>
9988
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
