实现本地图片预览（ie11,chrome最新版，firefox最新版已测式通过）

来源：互联网发布：ntp服务器地址端口编辑：程序博客网时间：2024/06/10 19:04

<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function previewImage(){
//判断浏览器是否支持FileReader接口
if(typeof FileReader == 'undefined'){
//这里用来提示用户的浏览器不支持图片预览所使用FileReader接口
alert("你的浏览器不支持FileReader接口。无法看到图片预览");
//使选择控件不可操作
return false;
}
readAsDataURL("file","result");
}

//将文件以文本形式读入页面
/*
** in_file_id:上传文件的控件id
**show_area_id：要显示的区域的ID
*/
function readAsDataURL(input_file_id,show_area_id){
var file = document.getElementById(input_file_id).files[0];
//匹配上传的文件是不是图片（使用正则表达是判断）
if(!(/image\/\w+/.test(file.type))){
alert("您所选择的不是图片");
return false;
}

var reader = new FileReader();
//使用文件以DataURL形式读入页面
reader.readAsDataURL(file);
reader.onload=function(e){
var result=document.getElementById(show_area_id);
//显示文件
// 查看img的src内容是什么 alert('<img src="' + this.result +'" alt="" />');
result.innerHTML='<img src="' + this.result +'" alt="" />';
}
}
//将文件以文本形式读入页面
/*
** in_file_id:上传文件的控件id
**encode：读取文件的编码方式
**showArea_id：要显示的区域的ID
*/
function readAsText(input_file_id,encode,showArea_id){
var file = document.getElementById(input_file_id).files[0];
var reader = new FileReader();
reader.readAsText(file,encode);
reader.onload=function(f){
//显示文本文档
document.getElementById(showArea_id).innerHTML=this.result;
}
}
</script>
</head>
<body>
<p>

<label>请选择一个文件：</label>

0 0